2

我有以下代码，其中两个 Section 块垂直跟随，我希望它们水平对齐。为此，我将它们的属性 inline-block 放在我的 CSS 的 position 参数中，但它不起作用。

这是我的代码：

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; 
}
4

3 回答 3

0 
.desc-block-left{ float:left; }
.desc-block-right{ float:right; }

为什么不简单地对块应用浮点数？记住这样，display:inline-block; 没用的。别的东西。边距值非常高，因此如果您没有大的内容，它们将永远不会水平对齐。

于 2013-10-17T16:11:22.630 回答
0

好吧，float 并不能真正解决问题，而且通常不是一个好的做法，因为它妨碍了以后的 UI 灵活性。但是，@Mela 是正确的，表明边距是导致错误的最可能原因，因为 80% + 360px 不太可能适合水平对齐到大多数容器中。这只会在 1920 像素宽的屏幕上留下 24 像素。

但是，通过根据百分比确定正确的边距，它是有效的。如果你想坚持使用内联块，你也应该考虑左边距，我建议。

但是，如果您不想要基于百分比的边距，您也应该将部分宽度设置为 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 中清除，因为它们只是分散注意力）

于 2013-10-17T16:27:55.080 回答
0

第一的，

position: inline-block;

真的应该是： 

display: inline-block;

然后是问题：
inline-block空格有问题。如果使用 inline-block 显示的两个元素之间存在空白，则将考虑空白。（我所说的空格是指我们用来格式化 HTML 代码以提高可读性的回车）。 

<section>  
...  
</section>    (this carriage return is considered a whitespace)  
<section>  
...
</section>

这意味着一个不错的 50% 部分，然后另一个 50% 部分将显示为 50% + 空白 + 50%。让第二列落在下一行。但是现在你计算你的百分比总是会有额外的空间来搞砸它。

解决方案：

我最喜欢的是在这两个元素之间添加注释。它保持可读性并干净地解决了问题。 

<section>
...
</section><!--    (this comment is not considered a whitespace)
--><section>
...
</section>

或者，您可以在关闭第一个标签后立即打开第二个标签： 

<section>
...
</section><section>
...
</section>
于 2014-03-04T02:56:53.320 回答