css - 两个 float 的 div - 调整大小时都是全宽

Question

我在一个容器中有两个div

<div class="container">
    <div id="left"><img src="logo.jpg" width="160" /></div>
    <div id="right">
        <h2>Name</h2>
        <h3>Address</h3>
    </div>
</div>

当浏览器调整大小时，我希望两个 div 都以居中的左侧 div 的内容填充父容器的宽度。

我可以使用媒体查询来完成此操作:

/* Base Style */
#left, #right {
    float: none;
    width: 100%;
}

/* Large Devices */
@media (min-width: 1200px) {
    #left, #right {
        float: left;
        width: auto;
    }
}

然而，这有它的问题，因为右侧 div 中的内容是可变的，因此断点将始终根据加载的内容而不同。

当两个 div 不再内联时，是否可以自动将它们设置为 100% 宽度？

Answer 1

您可以使用 display:table-cell 来实现您想要的 - 这也允许垂直对齐:

正常宽度没有样式然后这个媒体查询:

/* Large Devices */
@media (min-width: 1200px) {
    .container {display:table; width:100%;} 
    #left {text-align:center; vertical-align:middle;}
    #right {vertical-align:top; width:100%;}
    #left, #right {
        display:table-cell;
    }
}

Example