0

私が働いているウェブサイトの現在のhtmlは混乱しています。プロジェクト自体が原因で（ページは互いに異なりますが、新聞のように同じアイデアです）、htmlチームがsux、lolであるためです。

アイデアは、1つの行、またはその間に境界線のない2つの列、境界線のある2つの列、またはこれらの組み合わせを持つことができるということです。

私は次のcssとhtmlを作成しましたが、これで整理されたように見え、任意の組み合わせを使用できます。

CSS：

/* start structure */

div#wrapper {
    margin: 0 auto;
    width: 1024px;
}

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

body {
    font-family: "Trebuchet MS";
}

div#content {
    border: 1px solid #b2b2b2;
}

div.row {
    margin: 10px;
}

div.row.bb {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #b2b2b2;
}

div.row.bt {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #b2b2b2;
}

div.column {
    margin: 10px;
    float: left;
}

div.column.left {
    width: 660px;
}

div.column.right {
    width: 322px;
}

div.column.left.br {
    width: 659px;
    margin-right: 0;
    padding-right: 10px;
    border-right: 1px solid #b2b2b2;
}

/* end structure */

HTML：

<div id="wrapper">
    <div id="content">
        <div class="row">a</div>
            <div class="row bt bb">b</div>
            <div class="columns group">
            <div class="column left br"><p>c</p><p>c</p><p>c</p><p>c</p></div>
            <div class="column right">d</div>
        </div>
        <div class="row bt bb">a</div>
        <div class="columns group">
            <div class="column left"><p>c</p><p>c</p><p>c</p><p>c</p></div>
            <div class="column right">d</div>
        </div>
        <div class="row bt">a</div>
    </div>
</div>

しかし、私は問題を見つけました。境界線のある2つの列を使用するdiv.column.left.br場合、右側の列が左側の列よりも高い場合、境界線は左側の列が終了する場所で終了します。左右両方の列に境界線を配置することで解決できることはわかっていますが、2ピクセルの境界線で終了しています。

どうすれば自分のコンテキストでそれを解決できますか？

4

2 に答える 2

2

border-left右の列と左の列の両方にを追加しborder-rightます。次に、右の列を左に移動します1px。

jsFiddleの例

新しいCSS

<style type="text/css">
/* start structure */

div#wrapper {
    margin: 0 auto;
    width: 1024px;
}

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

body {
    font-family: "Trebuchet MS";
}

div#content {
    border: 1px solid #b2b2b2;
}

div.row {
    margin: 10px;
}

div.row.bb {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #b2b2b2;
}

div.row.bt {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #b2b2b2;
}

div.column {
    margin:10px 0;
    padding: 0 10px;
    float: left;
}

div.column.left {
    width: 660px;
}

div.column.right {
    width: 322px;
}
div.column.left.br + div.column.right {
    border-left: 1px solid #b2b2b2;
    margin-left:-1px;
}

div.column.left.br {
    width: 659px;
    margin-right: 0;
    padding-right: 10px;
    border-right: 1px solid #b2b2b2;
}

/* end structure */
</style>
于 2012-05-18T20:55:08.400 に答える
0

どの列がより高い列になるかを定義し、その列に境界線を配置するには、いくつかの追加のクラスが必要です

何かのようなもの

<div class="tallerLeft">
    <div class="left">

ただし、コンテンツが動的である場合、これは特に柔軟性がありません。

于 2012-05-18T20:57:56.603 に答える