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を参照してください。