CSS：2 divs下的虚线边框

鹰嘴豆

样本图片

请参阅所附的图片和小提琴。想法是并排放置2个表（蓝色框），您可以在每个表中选择一行，然后按下面的红色链接按钮。连接框和链接按钮的线必须为虚线边框。蓝色框的高度将有所不同。

<div class="container cf">
    <div class="link">
        <div class="linkButton">
            <input type="button" value="link" />
        </div>
    </div>

    <div class="tab table1">Table left </div>
    <div class="tab table2">Table right</div>
</div>

我在将链接按钮居中时遇到困难，并且还想知道我的HTML有多健壮，因为使用负值放置了链接按钮和容器。

任何关于更好的结构的建议都欢迎。我需要支持IE7，所以我无法利用：before，：after和其他伪元素。

贴纸

这是它的简化版本，我更改了表的顺序，因此先浮动了一个表，因此不需要进行明确的修复。

<div class="tab table2">Table right</div>
<div class="tab table1">Table left</div>

完整的代码/演示如下。

.container {
    width: 500px;
    position: relative;
    margin-bottom: 70px;
}
.tab {
    background: #00395c;
    color: #fff;
    width: 200px;
    height: 100px; /*try a different height*/
}
.table2 {
    float: right;
}
.link {
    border: 2px dashed grey;
    border-top-width: 0;
    width: 300px;
    height: 50px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: -50px;
    margin-left: -150px;
}
.link input {
    position: relative;
    bottom: -40px;
}

<div class="container">
    <div class="link">
        <input type="button" value="link" />
    </div>
    <div class="tab table2">Table right</div>
    <div class="tab table1">Table left</div>
</div>
<div class="anotherDiv">This is another div</div>

JSFiddle演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。