0

タイトルが意味をなさないことは知っていますが、付け方がわかりません。

これを見てください：http：//jsfiddle.net/nr33k/embedded/result/

右側のウェルの高さを、左側の2つのウェルの高さに合わせて増やしたいので、1つの大きな長方形に3つの小さなウェルがあるように見えます。高さを追加して高さを上げようとするとheight:150px、左側の下部ウェルが落下します。どうすればこれを解決できますか？

4

4 に答える 4

1

クラスに合わせて、右側のスパンの高さを設定してみてfloat:left;ください。row

.row {float:left;}

これが実際のサンプルです http://jsfiddle.net/BUgQc/

于 2012-12-03T13:10:21.423 に答える
0

問題は、最初の 2 つの「井戸」が一列に並んでいて、3 番目の井戸が別の列にあることです。

これを試して：

<div class="row">
  <div class="span4">
    <div class="well well-small" style="height:50px">
      <p>hello</p>
    </div>
    <div class="well well-small" style="height:100px">
      <p>hello again</p>
    </div>
  </div>
  <div class="span8">
    <div class="well well-small" style="height:190px;">
      <p>hello one more time</p>
    </div>
  </div>
</div>
于 2012-12-03T12:51:13.237 に答える
0

左側を 1 つの DIV で 2 つの DIV にし、左にフロートさせ、右側を大きくします。単一の DIV で div を作成し、左の場合はフロートします....これが役立つことを願っています....

于 2012-12-03T12:43:31.117 に答える
0

この例を確認してください。それが役に立てば幸い

HTML

<div id="container2">        
    <div id="container1">
        <div id="col1" style="height:250px">
            <!-- Column one start -->
            <h2>Equal height columns</h2>           
            <!-- Column one end -->
        </div>

        <div id="col2">
            <!-- Column two start -->            
            <h3>Mac</h3>           
            <!-- Column two end -->
        </div>            
    </div>
</div>​

CSS

#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}​

デモ

ソースリンク

于 2012-12-03T12:57:36.540 に答える