0

左の div 内のコンテンツが増加すると、レイアウト全体の高さがそれに応じて増加し、すべてが正常に機能します: jsfiddle。ただし、右側の div 内のコンテンツの高さが増加しても、レイアウトは増加しません: jsfiddle

<div class="outer">
   <div class="contain">
        <div class="one">
       </div><div class="two">
                 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        </div>
    </div>

    <div class="bottom">
    </div>
</div>

CSS:

.outer {
   display: block;
   width: 500px;
   min-height: 500px;
   background-color: black;    
   border: 2px solid black;
}

.contain {
   display: block;
   width: 500px;
   min-height: 500px;
   background: red;
}

.one {
    display:inline-block;
    width: 200px;
    min-height: 100px;
    background: yellow;
    bottom:200px;
}

.two {
    float:right;
    width: 300px;
    min-height: 300px;
    background: purple;

}

.bottom {
    display:block;
    background: blue;
    width: 500px;
    height:200px;  
    bottom: 0;    
}

いくつかのガイダンスをいただければ幸いです。

4

2 に答える 2

0

あなたのコードから、2つのボックス（1つと2つ）がスペースを埋めない場合は下に揃えたいと思いますか？もしそうなら、あなたはこれを試してみるべきです：

.one {
    display:inline-block;
    width: 200px;
    min-height: 100px;
    background: yellow;
    vertical-align: bottom;
}

.two {
    display:inline-block;
    width: 300px;
    min-height: 300px;
    background: purple;
    vertical-align: bottom;
}

両方を設定した幅にしているので、両方をに設定しinline-block、それらを並べて配置する必要があり、両方がスペースを占有します。フローティングブロックはスペースを取りません。

于 2012-12-17T15:31:53.573 に答える
0

font-size：0をclass = "contain"に追加します。これは、インラインブロックdivが内部にあり、その性質上、マークアップの空の空白を取り、ギャップを作成するためです。必要に応じて、内部要素に個別にfont-sizeプロパティを追加します。

于 2012-12-17T15:32:02.613 に答える