gpt4 book ai didi

html - float 元素下的额外边距

转载 作者:太空宇宙 更新时间:2023-11-04 10:04:13 25 4
gpt4 key购买 nike

我对构建容器的方式有疑问。我有两行,每行有两列。想想 4 个象限(见下图)。左下象限上升到右上象限。

我正在使用 float 来为不同的视口(viewport)切换位置,所以 float 是必须的。我已经在这个问题上停留了一段时间,似乎无法弄清楚。

我包括了它正在做什么的快照。除了左下象限进入右上象限外,行与行之间有一个空隙。

我也包括了一个 fiddle 。有人看到发生了什么事吗?

enter image description here

enter image description here

.section-blocks {
width: 50%;
height: auto;
display: inline-block;
vertical-align: top;
}
.section-block-img {
height: 100%;
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}

#company-information {
width: 100%;
height: auto;
}
.company-information-block-title, .company-information-block-title2, .company-information-block-general-title, .company-information-block-description {
color: #313743;
line-height: 1.4em;
}
.company-information-block-title {
font-size: 1.6em;
margin-bottom: 20px;
}
.company-information-block-title2 {
font-size: 3.2em;
margin-bottom: 40px;
font-weight: bold;
color: #0085A1;
}
.company-information-block-general-title {
font-size: 2.2em;
margin-bottom: 40px;
font-weight: bold;
}
.company-information-block-description {
font-size: 1.2em;
margin-bottom: 40px;
}


#company-information-block2 {
height: auto;
}

#company-slider-section {
width: 100%;
height: auto;
position: relative;
}

div#slider {
width: 100%;
overflow: hidden;
position: relative;
}

#responsive-section {
width: 100%;
height: auto;
}
#responsive-block1 {
float: left;
height: 100%;
width: 40%;
position: relative;
}
#responsive-block2 {
float: right;
height: auto;
width: 60%;
overflow: hidden;
}
#responsive-block2 img {
width: 100%;
height: auto;
}
<div class="section-blocks right">
<div class="company-container">
<div class="company-information-block-general-title">COMPANY STORY</div>
<div class="company-information-block-description">
<p>fdhsia fid afdan fndsanfdn fnfd fksanfanfd nfdanfan nfanafn dfnejwaoN F[gnf nr rnreogn aonrkngrnrnasng r narnrnoangrfkdkgraarmng aa arngrnga;aggkrioa anrnr argnkrg gagnrgng g grkrn g g rgn e gan ggn as</p><br><br>
<p>Ohtgfd htgdh thtrh trh rt sdfhh htsh shfh tsh sshh hs thhth shgsndfsank kfdnsak fndnkfdsa nkf f ndaiof nfasoanovn ndan fna gn an gnalnasgng agngna na nngfen grana akn gngaananogn</p>

</div>
</div>
</div><div id="company-slider-section">
<div class="section-blocks left">
<div id="slider" class="slider">
<figure class="figure figure2">
<div class="slide-wrapper">
<div class="slide"><img src="http://optimumwebdesigns.com/images/work/projects/eslich/es-test1.jpg" alt class="slide-image"></div>
</div>
</figure>
</div>
</div>
</div>
<div id="responsive-section">
<div id="responsive-block1">
<div class="company-container">
<div class="company-information-block-general-title">INDUSTRY SPECIFIC</div>
<div class="company-information-block-description"></div>
</div>
</div>
<div id="responsive-block2">
<img src="http://optimumwebdesigns.com/images/work/projects/eslich/es-test3.jpg" alt>
</div>
</div>

最佳答案

我能看到的最简单的解决方案是使用 .clearfix 解决方案将您各自的象限包装成行:

.clearfix:after {
content: "";
display: table;
clear: both;
}

关于html - float 元素下的额外边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38146779/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com