两个DIV，小屏无间断，宽度灵活答案

【问题标题】：Two DIV aside with no break on small screen and flexible width两个DIV，小屏无间断，宽度灵活
【发布时间】：2012-10-05 03:51:07
【问题描述】：

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

【问题讨论】：

标签： html break

【解决方案1】：

我会做类似下面的事情；

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 的显示方式

【讨论】：

那行不通。当里面的内容太宽时，第二个 div 仍然会换行。 4ex 如果你插入一个 2000px 宽度的 div。
你是否给第二个 div 中的 div 一个浮点数，因为这可能是个问题？也许您可以向我们展示您的代码
还是不行。我的新代码：

first
我无法查看图像。您使用的是哪个浏览器？所以没有图像，div 仍然没有向左浮动？您使用的是哪种文档类型？

【解决方案2】：

创建一个包装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

【讨论】：

那行不通。当里面的内容太宽时，第二个 div 仍然会换行。 4ex 如果你插入一个 2000px 宽度的 div。