html - 两个DIV，小屏不中断，宽度灵活

Question

我想要 2 个 div 放在一边，它们必须放在一边。如果屏幕太小，我不希望两个 div 放在一起。第一个 DIV 具有 400px 的固定宽度，第二个 DIV 可以在 150px 和无限之间。高度都固定在 300px。我怎样才能做到这一点？我已经尝试过浮动，但如果屏幕太小，则会导致 DIV 中断。用大宽度制作一个包装器 div 会起作用，但看起来很丑陋且有问题。

Answer 1

创建一个包装 div 并给它display: table-row; min-width: 550px;，然后让它里面的 div 有display: table-cell;. 像这样的东西：

.container
{
    display: table-row;
    min-width: 550px;
}

.container > div
{
    display: table-cell;
    height: 300px
}

.container > div:first-child
{
    width: 400px;
}

.container > div:last-child
{
    min-width: 150px;
}

然后是 HTML：

<div class="container>
    <div>I have 400px width.</div>
    <div>I have at least 150px width, and am next to the other guy.</div>
</div>

在这里，有一个小提琴

Answer 2

我会做如下的事情；

HTML

<div id="containerdiv">     
   <div id="fixeddiv">&nbsp;</div>
   <div id="elasticdiv">
      <div id="div2000">&nbsp;</div>
   </div>
</div>

CSS

#containerdiv{
   min-width:550px;
}

#fixeddiv{
   height:300px;
   width:400px;
   background:red;
   float:left;
}

#elasticdiv{
   height:300px;
   overflow:hidden;
   min-width:150px;
   background:blue;
}

#div2000{
  width:2000px;
  background:yellow;
  float:left;
}

div 将如何显示