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

来源

2015-04-29 grimmus

'我也想知道如何强健我的HTML is'坚固？：/您正在使用伪元素的浮动元素混合相对和绝对定位......整个事情可能很容易完成 –

另外，如果按钮类似于“将表1中的行复制到表2”或类似的东西，考虑使用拖放以获得更好的用户体验 –

*我无法利用：before，：after和其他伪元素* - 但在您的小提琴中，您正在使用它们吗？那么@AndreaLigios已经说过，浮动和定位元素？我怀疑这在目前的浏览器中是否可靠，更不用说IE7了。 – jbutler483

这是它的简化版本，我改变了表格的顺序，所以首先浮动，因此清除修复将不是必需的。

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

Full code/demo below。

.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

来源

2015-04-29 14:15:46 Stickers

谢谢，似乎很好。如果我需要.table1元素出现在.table2之前，我应该重新加入clearfix吗？ – grimmus

@grimmus是的，根据[作者]（http://nicolasgallagher.com/micro-clearfix-hack/），cf hack可以在IE6 +上正常工作。 – Stickers

为中心的按钮变化absolute位置的relative：

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

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

来源

2015-04-29 13:47:38 panther

你不应该用'position：relative'来使用'top'值。 –

如果更改CSS来跟随它应该可以帮助您：

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

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

来源

2015-04-29 13:49:04 suvroc

CSS：2格虚线边框

回答

相关问题