0

こちらのデモをご覧ください: http://jsfiddle.net/Freewind/Vkp4U/

html:

<div class="outer">
    <div class="x">x</div>
    <div class="y">y</div>
    <div class="z">z</div>
</div>​

CSS:

.outer {
    border: 1px solid black;
    overflow: scroll-x;
}

.x {
    width: 400px;
    border: 1px solid red;
    float:left;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    float:left;
}

.z {
    width: 400px;
    border: 1px solid blue;
    float:left;
}​

ブラウザのサイズを小さくすると、3 つの内部 div が一列に表示されるようにするにはどうすればよいですか?

制限:

  1. 外側の div の幅は指定しないでください
  2. 内側の div の幅は固定されています
4

3 に答える 3

1

CSS 幅に % を使用...

.outer {
    border: 1px solid black;
    overflow: scroll-x;
}

.x {
    width: 30%;
    border: 1px solid red;
    float:left;
}

.y {
    width: 30%;
    border: 1px solid yellow;
    float:left;
}

.z {
    width: 30%;
    border: 1px solid blue;
    float:left;
}​
于 2012-04-06T15:01:29.330 に答える
1

こんにちは、次のようにcssプロパティで表示テーブルとテーブルセルを定義できます

CSS

.outer {
    border: 1px solid black;
    overflow: scroll-x;

    display:table;
}

.x {
    width: 400px;
    border: 1px solid red;
    display:table-cell;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    display:table-cell;
}

.z {
    width: 400px;
    border: 1px solid blue;
    display:table-cell;
}

HTML

<div class="outer">
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</div>​
​

ライブデモhttp://jsfiddle.net/Vkp4U/5/

于 2012-04-06T15:01:33.370 に答える
1

これはうまくいくかもしれません: ここでの考え方は、外側を相対位置として設定することです。これで、すべての絶対サブ div が親の相対 div を参照します。(デモはこちら: http://jsfiddle.net/Vkp4U/7/ )

.outer {
    border: 1px solid black;
    overflow: scroll-x;
    position:relative;
}

.x {
    width: 400px;
    border: 1px solid red;
    float:left;
    position:absolute;
    left:0px;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    float:left;
    position:absolute;
    left:400px;
}

.z {
    width: 400px;
    border: 1px solid blue;
    float:left;
    position:absolute;
    left:800px;
}​
于 2012-04-06T15:00:45.893 に答える