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

Answer 2

试试这个;

@media (max-width: 1200px) {
    #left, #right {
        width: 100%;       
    }

Answer 3

为什么width: auto？如果#left是屏幕的1/2，而#right是屏幕的1/2，则可以使用百分比，例如width: 50%。使用CSS3 calc函数可以完成更多漂亮的工作。也就是说，CSS对数学不是很好，所以也许是Javascript？

在我的头顶：

/* get window width */
var windowWidth = $(window).width();

/* update window width on resize */
$(window).resize(function() {
  windowWidth = $(window).width();
});

/* sizes */
var leftWidth = $('#left').width();
var rightWidth = $('#right').width();
var maxWidth = 600; /* half of 1200px, or whatever you want

/* magic, or if #left exceeds the max width, both #left and #right go block */
if(leftWidth > maxWidth) {
  $('#left, #right').css({'display':'block', 'width': + windowWidth + 'px'});
}

请注意，上述操作是在jQuery

的帮助下完成的

两个浮动的div - 调整大小时全宽

3 个答案: