Question

一个小问题我有2个DIV，并排（浮动）：

AAAAAAAAAAA BBBBBBBBBBB
AAAAAAAAAAA BBBBBBBBBBB
AAAAAAAAAAA
AAAAAAAAAAA

我想要2个DIV之间的1pix实线边框，我希望这个边框具有最长DIV的高度（在我之前的例子中，A的高度，在另一个例子中，B的高度）

AAAAAAAAAAA BBBBBBBBBBB
AAAAAAAAAAA BBBBBBBBBBB
            BBBBBBBBBBB
            BBBBBBBBBBB

我知道如何使用简单的<table>执行此操作，但我不知道如何使用DIV进行此操作我试图为A设置一个右边框，为B设置边框左边，但是我有一个2px的边框...

感谢您的帮助！

Answer 1

我不确定这是最好的解决方案，但是......

<div id="foo">
AAAAAAAAAAA
AAAAAAAAAAA
AAAAAAAAAAA
AAAAAAAAAAA
</div>
<div id="bar">
BBBBBBBBBBB
BBBBBBBBBBB
</div>

#foo, #bar {
    float: left;
    padding: 5px;
}
#foo {
    border-right: 1px solid #000;
}
#bar {
    border-left: 1px solid #000;
    margin-left: -1px;
}

Answer 2

你可以为A做一个右边框，为你做边框左边的B，并添加一个边距：-1px;对于B

Answer 3

“通常”的方法是在两个DIV周围的元素上使用背景图像作为边框。

如果您不需要支持IE6，那么您也可以将两个DIV显示为表格单元格（display: table-cell）而不是浮动并应用边框，就像它是一个表格一样。

Answer 4

Jevgeni Bogatyrjov在我面前回答：）

添加

margin-left: -1px;

到div B

Answer 5

如果你想在没有图像的情况下这样做：

将A和B包裹到另一个div C. 设置CSS位置：C的相对值然后在C里面创建第三个div D. 设置以下CSS属性：

position:absolute;
top:0;
right:[width-of-B + padding]

Answer 6

如果您有部分透明边框或超过2个div需要像这样对齐而且无法使用margin: -1px;解决方案，那么您应该在div上使用display: box;，从而使所有其中最高的一个的高度。这样你只需要在每个边上的边框，但第一个或最后一个div

DIVs边界（比TABLE边界更少的可能性？！）

6 个答案:

Jevgeni Bogatyrjov在我面前回答：）