1

http://jsfiddle.net/w9E4K/7/

<div id="parent">
<div id="left">Left</div>
<div id="right">Right</div>
</div>​

#left {
    display: inline-block;
    width: 75%;
    background-color: blue;
}

#right {
    display: inline-block;
    width: 25%;
    min-width: 100px;
    background-color: red;
}

#parent {
    overflow: auto;
}

1つは画面の3/4、もう1つは1/4になるようにレイアウトしようとしている2つのdivがあります。ただし、画面が小さくなりすぎる場合は、要素がシフトしないように最小幅を設定する必要があります。

これをCSSで表現する方法を知りたいですか？アイデアは、右側のdivが少なくとも100pxを要求し、親divがそれを保持するために広がるようにするというものです。

これが役立つ場合は、インラインブロックの代わりにフロートを使用するように切り替えることができます。

4

2 に答える 2

1 
#left {
  overflow: hidden;
  background-color: blue;
}

#right {
  float: right;
  width: 25%;
  min-width: 100px;
  background-color: red;
  margin-top: 5px; // only used to see the left div
                   // actually ending next to the right div
}

と：

<div id="parent">
  <div id="right">Right</div>
  <div id="left">Left</div>
</div>

デモ： http： //jsbin.com/akamik/1/

于 2012-12-18T19:56:08.540 に答える
0

親コンテナが400px未満に縮小すると、このシナリオでは何もできなくなります。左側の列に最小幅が必要な場合は、親に最小幅を設定する必要があります。

于 2012-12-18T19:48:40.803 に答える