CSS：2个div下的虚线边框

Question

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

到目前为止我所拥有的Here you can find the fiddle。

<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和其他伪元素。

Answer 1

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

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

Answer 2

将absolute的按钮更改relative位置居中：

.link input[type="button"] {position:relative; top:50px;}

http://jsfiddle.net/xfeaj3f7/7/

Answer 3

如果您将css更改为以下内容，则可以为您提供帮助：

.link input[type="button"] {
    margin-top: 50px;
}

http://jsfiddle.net/xfeaj3f7/8/