0

我工作的网站的当前html是一团糟，一些是因为项目本身（页面彼此不同但有相同的想法，就像报纸一样）还有一些是因为html团队sux，哈哈。

这个想法是我可以有一行，或者两列之间没有边框，两列有边框，或者这些的组合。

我编写了以下 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>

但是我发现了一个问题。当使用带边框的两列时div.column.left.br，如果右列比左列高，则边框在左列结束的地方结束。我知道我可以通过将边框放在左右列上来解决它，但我以 2 像素边框结束。

如何在我的上下文中解决它？

4

2 回答 2

2

Add both a border-left on the right column and a border-right on the left column. Then move the right column to the left 1px.

jsFiddle Example

New 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 回答