0

我是 CSS 领域的新手，所以请原谅我的无知！我正在尝试使用以下 CSS 水平对齐两个 div：

.portrait {
    position: relative;
    display:inline-block;
    width: 150px;
    height: 200px;
    padding: 20px 5px 20px 5px;
 }

.portraitDetails {
    position: relative;
    display:inline-block;
    width: 830px;
    height: 200px;
    padding: 20px 5px 20px 5px;
 }

不幸的是，除非我display: inline-block从类中删除并用第一个 div 块下方的 div 块.portrait替换它。到底是怎么回事？float:left.portraitDetails

4

2 回答 2

0

问题display: inline-block;在于，具有此属性的兄弟姐妹总是由一个空格分隔，但前提是它们的开始标签和结束标签之间有任何空格。
如果父容器的固定宽度等于这两个 div 的宽度之和，那么它们将不适合，因为这个微小的空白将第二个 div 推到下一行。您必须删除标签之间的空白。
所以，而不是那样：

<div class="portrait">
    ...
</div>
<div class="portraitDetails">
    ...
</div>

你必须这样做：

<div class="portrait">
    ...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
    ...
</div>
于 2013-11-12T14:13:33.130 回答
0

由于您提供了一个工作示例，因此现在问题似乎更清楚了。
您所要做的只是从正确的 div 中删除display: inline-block和width: 830px属性。当然记得不要float向它添加属性。

人们有时会忘记float财产的用途。在您的情况下，图像应该具有float属性并且只有图像。默认情况下，右侧 div 将保持100%宽，而图像将从左侧浮动。

提示：如果 div 中的文本足够长以漂浮在图像下方，并且您希望将其“缩进”在同一点，则将边距添加到 div，其值等于图像的宽度。

于 2013-11-12T14:56:30.850 回答