我有以下代码,其中两个 Section block 垂直排列,我希望它们水平对齐。为此,我将它们的属性 inline-block 放在我的 CSS 的位置参数中,但它不起作用。
这是我的代码:
HTML
<section class="desc-block-left">
<img class="icon"src="img/scolarite.png" alt="Scolarité">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, quos, perspiciatis reiciendis explicabo possimus vel culpa fugiat voluptatum laboriosam hic adipisci dicta itaque sed ipsum assumenda! Alias voluptatum blanditiis beatae?
</p>
<ul>
<li><img src="img/tools-info2.png" alt="Info"></li>
<li><img src="img/tools-fav2.png" alt="Fav"></li>
</ul>
</section>
<section class="desc-block-right">
<img class="icon"src="img/scolarite.png" alt="Scolarité">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, quos, perspiciatis reiciendis explicabo possimus vel culpa fugiat voluptatum laboriosam hic adipisci dicta itaque sed ipsum assumenda! Alias voluptatum blanditiis beatae?
</p>
<ul>
<li><img src="img/tools-info2.png" alt="Info"></li>
<li><img src="img/tools-fav2.png" alt="Fav"></li>
</ul>
</section>
CSS
/*LAYOUT LEFT COLUMN*/
.desc-block-left{
position:inline-block;
border-style:solid;
background-color:#ffffff;
width:40%;
height:110px;
margin:30px 10px 100px 150px;
border-radius:10px;
}
.icon{
float:left;
margin:5px;
}
.desc-block-left p{
position:inline-block;
float:left;
margin:5px;
width:70%;
text-align:justify;
}
.desc-block-left ul{
display:inline-block;
}
.desc-block-left ul li{
position:inline;
margin:10 5 10 5;
list-style:none;
}
/*LAYOUT RIGHT COLUMN*/
.desc-block-right{
position:inline-block;
border-style:solid;
background-color:#ffffff;
width:40%;
height:110px;
margin:30px 10px 100px 150px;
border-radius:10px;
}
.desc-block-right p{
position:inline-block;
float:left;
margin:5px;
width:70%;
text-align:justify;
}
.desc-block-right ul{
display:inline-block;
}
.desc-block-right ul li{
position:inline;
margin:10 5 10 5;
list-style:none;
}
最佳答案
好吧, float 并不能真正解决问题,而且通常不是一个好的做法,因为它会妨碍以后的 UI 灵 active 。但是,@Mela 是正确的,表明边距是导致错误的最可能原因,因为 80% + 360px 不太可能适合大多数容器水平对齐。这只会在 1920 像素宽的屏幕上留下 24 像素。
然而,通过将边距设置为基于百分比的正确值,它是有效的。如果你想坚持使用内联 block ,你也应该考虑左边距,我建议这样做。
但是,如果您不想要基于百分比的边距,您也应该将您的部分宽度设置为 px。混合 px 和 % 在大多数情况下是一个坏主意,因为你遇到的神秘问题必然会出现。
.desc-block-left1 {
display:inline-block;
border-style:solid;
background-color:#ffffff;
width:40%;
height:110px;
margin:30px 10px 10px 5%;
border-radius:10px;
}
.desc-block-right1 {
display:inline-block;
border-style:solid;
background-color:#ffffff;
width:40%;
height:110px;
margin:30px 10px 10px 5%;
border-radius:10px;
}
http://jsfiddle.net/dnGy5/ (从 lorem 和 imgs 中清除,因为它们只会分散注意力)
关于html - 如何让两个 HTML 部分块在 CSS 中对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19431097/