1

私はいくつかのマークアップを持っています:

<div class="container"> 
  <div class="one">column a<br />column a</div> 
  <div class="two">column b</div>
</div>

2 つの内部 div のコンテンツは高さが可変で、動的に生成されます。

2 つの内部 div に同じ高さを与えるために、いくつかの標準的な CSS トリックを使用しています。

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    width: 64%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}

.two{
    float: right;
    width: 34%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}

そしてフィドル：http://jsfiddle.net/FnWG8/

問題: 2 つの div の間に線が引かれますが、線が一番下まで伸びてコンテナーにぶつかります。これは、2 つの内部 div の最大高さが不明であるため、padding-bottom: 500pxandmargin-bottom: -500pxトリックを使用する必要があるためです。

2 つの内側の div を線で分割したいのですが、線の下部とそれを含む div の間にはいくらかのスペースが必要です。

ここに画像の説明を入力

これを達成するために何ができるでしょうか？

4

4 に答える 4

0

それが役立つかどうかを確認してください

この CSS を現在のものに置き換えます

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    margin-bottom: 5px;
}

.two{
    float: right;
    width: 35%;
    margin-bottom: 5px;

}​
于 2012-05-07T06:33:25.770 に答える
0

このCSSを試してください

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    min-height:10px;
    width: 65%;
    padding-bottom: 40px;
    margin-bottom: -500px;
}

.two{
    float: right; 
    min-height:40px;    
    width: 35%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}​
于 2012-05-07T06:48:56.353 に答える
0

これを試してみてください。あなたが望むことができると思います：

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    display: inline-block;
}

.two{
    border-left: 1px solid red;
    float: left;
    width: 35%;
    display: inline-block;
    margin-left: -1px;
}
于 2012-05-07T06:49:56.463 に答える
0

「.one」というラベルの付いた CSS ルールを次のように変更します (パディング/マージン設定をコメントアウトします)。

.one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    /*padding-bottom: 500px;
    margin-bottom: -500px;*/
}
于 2012-05-07T07:03:15.087 に答える