html - 显示 : inline-block not working unless first div floated:left

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

不幸的是，除非我从 .portrait 类中删除 display: inline-block 并将其替换为 float:left .portraitDetails div block 出现在第一个 div block 的下方。这到底是怎么回事？

Answer 1

既然你提供了一个有效的例子，现在问题似乎更清楚了。
您只需从右侧的 div 中删除 display: inline-block 和 width: 830px 属性即可。当然记得不要向它添加 float 属性。

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

提示:如果 div 中的文本足够长，可以浮在图像下方，而您想使其在同一点“缩进”，则将边距添加到 div，其值等于图像的宽度.