Question

我工作的网站的当前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像素边框结束。

我如何在我的背景下解决它？

Answer 1

在右栏添加border-left，在左栏添加border-right。然后将右列向左移动1px。

jsFiddle Example

新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>

Answer 2

你需要一些额外的类来定义哪一列更高，并将边界放在那一列

类似

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

但如果你的内容是动态的，这不是很灵活

并排div与其他边界上方的边界

2 个答案:

新CSS