html - 如何让两个 HTML 部分块在 CSS 中对齐？

Question

我有以下代码，其中两个 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; 
}

Answer 1

好吧， 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 中清除，因为它们只会分散注意力)