0

下の図は、私が取得しようとしているものの図です。1 番目の数字は長い幅を表し、2 番目の数字は短い幅を表します。すべての赤いブロックは左右の位置にとどまり、黄色のブロックはコンテナーの幅に従う必要があります。

1 : ここに画像の説明を入力 http://i.stack.imgur.com/6bHTo.jpg

これが私の現在のアプローチです

/* the one with black border :) */
.container{
    position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
    position: absolute;
    top: 0;
    width: 100px;
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
    margin: 0 110px;
}

私はこのアプローチにほぼ満足していますが、赤いブロックがコンテナーよりも高い場合、コンテナーはその内容の高さに自動追従しないことに気付きました。子供たちが絶対的な位置にあるため、コンテナを自動で高さにすることは不可能であることを理解しています。:)

4

4 に答える 4

1

CSS3 Flex Box の使用を検討しましたか? 次のようになります。

HTML:

<div class="container">
   <div class="red red-left">red-left<br>red-left<br>red-left<br>red-left<br>red-left</div>
   <div class="yellow">yellow<br>yellow</div>
   <div class="red red-right">red-right</div>
</div>

そしてCSS：

.container{
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;        
}

.red{
    background-color:red;  
    width:100px; 
}

.yellow{     
    background-color:yellow;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

このフィドルをチェックしてください：

http://jsfiddle.net/lucaslazaro/sjYNy/

編集：

Flex Box の詳細については、次のクイック チュートリアルをお勧めします: http://www.html5rocks.com/pt/tutorials/flexbox/quick/

于 2012-08-23T14:32:22.480 に答える
0

それを簡単にするための私自身のデモ。

ここでわかるのは、コンテンツがコンテナに重なっているということです。

于 2012-08-23T14:17:29.977 に答える
0

使用:

div {
    display: table;
    width: 100%;
    table-layout: fixed;
}

div > div {
    display: table-cell;
}

完全なコードを確認します。

http://jsfiddle.net/BF6La/

于 2013-12-04T22:14:22.460 に答える
0

たぶんそれが役立ちます：

HTML

<div class="container">
    <div class="red red-left">red-left<br>red-left<br>red-left</div>
    <div class="yellow">yellow<br>yellow</div>
    <div class="red red-right">red-right</div>
</div>

</p>

CSS 

/* the one with black border :) */
.container{
    position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
    position: absolute;
    top: 0;
    width: 100px;
    background:red;
    height:auto
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
    margin: 0 110px;
    background:yellow
}

</p>

</p>

<強い>デモ

于 2012-08-23T13:52:10.437 に答える