让我头疼的是对齐 2 个 div。我读过很多教程,其中使用了两个 div,一个向左浮动,另一个向右浮动。这是我正在使用的代码。问题是如果调整浏览器大小或使用较低的分辨率,div“fotosder”中的图像会下降。
这是我的代码:
<li>
<div class="holder_slogan">
<p class="slogan"> slogan </p>
<div class="social_buttons2">
<div class="inset">
<a class="fb login_button" href="http://xxx.com/facebook?next=xxx">
<span class="logo_wrapper"><span class="logo"></span></span>
<span>Facebook</span>
</a>
</div>
<div class="registrate">
<img src="data/images/registrate.png" alt="registrate" />
</div>
</div>
</div>
<div class="fotosder"><img src="images/imagen1.jpg" alt="listad" /></div>
<div style="clear:both;"></div></li>
.sp-slider > li {
-moz-box-sizing: border-box;
float: left;
height: 100%;
padding: 0 60px;
position: relative;
text-align: left;
transition: opacity 0.4s ease-in 0.8s;
width: 20%;
z-index: 2000;
}
.holder_slogan {
float: left;
margin: 66px 0 0 18%;
width: 387px;
}
#board .slogan, #board2 .slogan {
float: left;
font-size: 12px;
line-height: 25px;
margin-right: 30px;
padding-right: 10px;
padding-top: 6px;
text-align: left;
width: 470px;
}
.social_buttons2 {
float: left;
margin: 0 auto;
width: 220px;
}
.fotosder {
float: right;
margin: 5px 18% 0 0;
position: relative;
width: 329px;
}
.sp-slider > li img {
-moz-box-sizing: border-box;
display: block;
max-height: 100%;
max-width: 100%;
padding: 10px 0;
}
img {
border-style: none;
vertical-align: top;
}
最佳答案
这是正常行为。当环绕元素的宽度不足以容纳两个 float 元素时,一个将在另一个下方。在这种情况下,右侧 float ,因为它是文档流中的“最后一个”。
如果您担心这一点,请给元素一个 % 宽度,并且它们不应该重新排列,除非它们变得非常小或者元素的内容阻止它们进一步收缩。
关于css - 对齐 2 个 div 使一个 div 垂直向下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13991371/