html - 小さな画面と柔軟な幅で途切れのない 2 つの DIV を脇に置く

Question

2 つの div を脇に置いておきたいのですが、それらは脇に置いておく必要があります。画面が小さすぎる場合は、2 つの div を互いの下に配置したくありません。最初の DIV は 400 ピクセルの固定幅で、2 番目の DIV は 150 ピクセルから無限に設定できます。高さはどちらも 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 の表示方法