1

HTML / CSSを使用して2列（またはそれ以上）のレイアウトを作成することが多く、境界線を区切る必要があります。私は通常、左または右の列のいずれかに境界線を追加しますが、最も高い列の高さに一致するように境界線が必要です。

この問題を説明するためにjsFiddleを作成しました：http：//jsfiddle.net/rxGUS/

前もって感謝します。

4

5 に答える 5

3

両方の境界線を指定するのはどうですか。ただし、境界線の幅に等しい負のマージンを持つ境界線を使用して、それらが重なるようにします。

.column1 {
    float:left;
    width:200px;
    padding:5px;    
    border-right:1px solid #000;
}
.column2 {
    float:left;
    width:200px;
    padding:5px;
    margin-left:-1px;    
    border-left:1px solid #000;    
}​

http://jsfiddle.net/alexk/rxGUS/9/

于 2012-05-23T17:00:09.437 に答える
1

Twitter BootstrapからのCSSを考慮に入れるために、Alexの回答から調整されました。2つの列の間隔は20px（から）であると想定されているため、境界線の両側にmargin-left:20px;設定を追加しました。10px必要に応じて、 forとforをに20px設定するだけです。padding-left.column2padding-right.column120px

.column1, .column2 {
    float:left;
    width: 200px;
}
.column2 {
    margin-left:-1px;
    border-left:1px solid #000;
    padding-left:10px;
}
.column1 {
    border-right: 1px solid #000;
    padding-right:10px;
}

TwitterBootstrapが含まれているjsFiddleの例を参照してください。

于 2012-05-23T19:34:18.353 に答える
0

これはいくつかの方法で行うことができます。最も簡単な方法：背景画像を作成してcssの境界線を置き換え、最も高い列の高さに一致するコンテナに適用します。ただし、これはあまり柔軟ではありません。

次に、javascriptを使用します。変数maxHeightを作成し、それを0に設定してから、各列をループして、その列の高さを返します。maxHeightよりも高い場合は、maxHeightをその値に設定します。ループが終了したら、すべての列をmaxHeightの値に設定します。

Googleにはこれに関するリソースがかなりたくさんあります。特にjQueryソリューション。

お役に立てば幸いです:)

于 2012-05-23T16:48:28.830 に答える
0

純粋なCSSでこれを行う簡単な方法はありませんが、必要な効果を実現できるEqualHeightsと呼ばれるjQueryプラグインがあります。基本的に、どの要素に適用するか（あなた.column1の.column2場合は）を指定すると、それらの高さが同じ値に動的に設定されます（どちらか高い方に基づいて）。

于 2012-05-23T16:54:15.233 に答える
0

いろいろ試してみることができますがdisplay: table-cell、8未満のIEとは互換性がありません。jsFiddleの例を次に示します。それはその間の境界線にCSS3セレクターを使用しますが、それをいじって、どのように機能させたいかを理解することができます。

于 2012-05-23T17:01:13.060 に答える