Question

我是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类中移除.portrait并将其替换为float:left，否则.portraitDetails div块会出现在第一个div块下方。到底是怎么回事？

Answer 1

display: inline-block;的问题是，只有在开头<之间有任何空格的情况下，具有此属性的兄弟姐妹总是被一个空格但分隔开来/ em>和关闭标签如果父容器的固定宽度等于这两个div的宽度之和，那么它们将不适合，因为这个微小的空白区域将第二个div推到下一行。您必须删除标签之间的空白区域所以，而不是：

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

你必须这样做：

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

Answer 2

由于您提供了一个实例，现在问题似乎更加清晰了您需要做的只是从右侧div中删除display: inline-block和width: 830px属性。当然记得不要向它添加float属性。

人们有时会忘记float财产的目的是什么。在您的情况下，图像应该具有float属性和仅图像。默认情况下，右侧div将保持100%宽，而图像将从左侧浮动。

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

display：inline-block不工作，除非第一个div浮动：left

2 个答案: