Css 两个浮动div-调整大小时均为全宽

我在一个容器中有两个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不能再内联时，是否可以自动使其100%宽度？

为什么

width:auto

？如果

#左

是屏幕的1/2，而

#右

是屏幕的1/2，则可以使用百分比，例如

宽度：50%

。使用CSS3函数可以做更多漂亮的事情。也就是说，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'});
}

请注意，上述操作是在

的帮助下完成的，请尝试此操作

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

---

您可以使用

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

---

最初使用百分比表示宽度，但我不满意大屏幕上元素之间的间距大小，即使在多个断点处调整百分比。您是否尝试过使用calc进行调整？宽度：例如calc（50%-20px）。几乎完美。只需要在左div中添加一个右边距，以便在两个div之间留出一点空间。通过添加填充权限解决：1.25rem；。

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