在右div移动到底部之前调整左div的大小

Posted 2021-05-04

我有两个水平对齐的div（display设置为inline-block）。当我调整浏览器的大小时，我希望左侧的div在右侧div移动之前调整大小。

我试过设置width，min-width和max-width，以及使用media queries。似乎没什么用。

Here's a picture of what I want to achieve

<div class="left">
    COTENT
</div>
<div class="right">
    CONTENT
</div>

body {
    margin: 66px auto 24px auto;
    max-width: 900px;
    background: rgba(200, 200, 200, 0.4);
}

.left {
    display: inline-block;
    max-width: 594px;
    min-width: 300px;
    margin-right: 6px;
}


.right {
    width: 290px;
    min-width: 290px;
    display: inline-block;
    vertical-align: top;
    margin-left: 6px;
}

答案

你可以这样试试：

.left {
    width: calc(100% - 290px);
}

并且为了避免将右侧div跳到下一行，请将其包含在带有flex样式的div（.container）中：

.container {
  display: flex;
}

这是代码：https://jsfiddle.net/8utdg4qb/