html - 在 html 问题中创建括号？

Question

我正在制作一些锦标赛括号。出于某种原因，我在将徽标 div 与括号线对齐时遇到问题。你能帮我并告诉我如何放置其他括号（以防我添加更多）非常感谢！

JSFIDDLE

HTML

<div class="logo1"></div>
<div class="logo2"></div>

<div class="brackets-direct">
    <div class="tpleft"></div>
    <div class="tpright"></div>
    <div class="btleft"></div>
    <div class="btright"></div>
</div>
​

CSS

.brackets-direct
{

}
.brackets-direct div {
    border: 1px solid #aaa;
    width: 38px;
    float: left;
    height: 33px;

}

div.tpleft 
{
    border-width: 1px 1px 0 0;
}
div.btleft 
{
    border-width: 0 1px 1px 0;
    clear: left;
}
div.tpright 
{
    border-width: 0 0 1px 0;
}
div.btright 
{
    border-width: 0;
}

.logo1, .logo2
{
    width: 50px; 
    height: 50px; 
    border: 1px solid #000; 
    margin-bottom: 2px;
}



​

Answer 1

对此的快速解决方法是使用以下样式：

.brackets-direct
{
    float: left;
    position: relative;
    top: -35px;
}

.logo1, .logo2
{
    width: 50px; 
    height: 50px; 
    border: 1px solid #000; 
    margin-bottom: 2px;
    float: left;
    clear: left;
}

不确定这是否适用于所有其他浏览器，但只需更改您的 JSFiddle 即可。您可以在此处阅读有关该clear属性的更多信息：http ://reference.sitepoint.com/html/br/clear