Css 对齐2个div,使其中一个垂直向下
我两个div的时候头疼。我读过很多教程,其中使用了两个div,一个是左浮点,另一个是右浮点。这是我正在使用的代码。问题是,如果调整浏览器的大小或使用较低的分辨率,div“fotosder”中的图像将下降 这是我的密码:Css 对齐2个div,使其中一个垂直向下,css,alignment,Css,Alignment,我两个div的时候头疼。我读过很多教程,其中使用了两个div,一个是左浮点,另一个是右浮点。这是我正在使用的代码。问题是,如果调整浏览器的大小或使用较低的分辨率,div“fotosder”中的图像将下降 这是我的密码: <li> <div class="holder_slogan"> <p class="slogan"> slogan </p> <div class="social_buttons
<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;
}
标语
.sp slider>li{
-moz框大小:边框框;
浮动:左;
身高:100%;
填充:0 60px;
位置:相对位置;
文本对齐:左对齐;
过渡:不透明度0.4s,在0.8s内降低;
宽度:20%;
z指数:2000;
}
.holder_口号{
浮动:左;
利润率:66px018%;
宽度:387px;
}
#董事会。标语,#董事会2。标语{
浮动:左;
字体大小:12px;
线高:25px;
右边距:30px;
右边填充:10px;
填充顶部:6px;
文本对齐:左对齐;
宽度:470px;
}
.社交按钮2{
浮动:左;
保证金:0自动;
宽度:220px;
}
福托斯德先生{
浮动:对;
利润率:5px18%0;
位置:相对位置;
宽度:329px;
}
.sp滑块>li img{
-moz框大小:边框框;
显示:块;
最大高度:100%;
最大宽度:100%;
填充:10px0;
}
img{
边框样式:无;
垂直对齐:顶部;
}
这是正常行为。当包裹图元的宽度不足以容纳两个浮动图元时,一个图元将位于另一个图元的下方。在本例中,右侧浮动,因为它是文档流中的“最后一个”
如果您对此感到担忧,请将元素的宽度设置为%,除非元素变得非常小或元素的内容阻止它们进一步缩小,否则不应重新排列。问题在于您的边距%,将其设置为某个固定值,然后再试一次。感谢您回复kyle。使用您的解决方案可调整图像的大小。这样做的目的是保持相同的大小,如果有人稍微调整浏览器的大小,图像就会显示得非常小。还有其他解决办法吗?@Tinku Rana如果我改变利润率,div将彼此分离。我需要它们居中,并且在div之间有一个小的间隔。有任何形式可以将它们固定在一起吗?我希望div居中,如果浏览器调整了大小、内联并且它们之间有一个小的间隔(30 px),您可以使用CSS@media查询来检测浏览器大小,并重新编写关于这两个div的规则:)