两个DIV，小屏幕和灵活宽度没有中断

Question

我想要两个div，他们必须待在一边。如果屏幕太小，我不希望两个div在彼此之下。第一个DIV的固定宽度为400px，第二个DIV可以在150px和无限之间。高度都固定在300px。 我怎样才能做到这一点？我已经尝试使用float，但如果屏幕太小，会导致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>

此处有一个 Fiddle

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

Divs将如何出现