div不對齊

Question

我在使用以下CSS時遇到問題，似乎無法讓白框與品牌框對齊：

實時網址

HTML：

    <div class="homeWrapper">
            <div class="homeWrapperContentLeft">
        <div id="default">
            <div class="content_inner">
            <h1><span class="color_red">Welcome</span>/h1>
            <p>
            </p>
        </div>
        <div class="brands">
            <h1><span class="color_red">Products</span> by Brand</h1>
            <table class="manufacturer_table" height="24" style="width: 100%;" width="242">
<tbody>
<tr>
<td>
</tbody>
</table>

<div class="homeWrapperContentLeftCenter">
    text
</div>
        </div>
        </div>
        </div>  
        </div>

CSS：

.homeWrapperContentLeft{
    width:628x;
    height:825px;
    background-color: red;
}
.homeWrapperContentLeft .brands{
    float:left;
    width:251px;
    height:598px;
    padding: 12px; 
    clear: both;
}

.homeWrapperContentLeftCenter{
    float:left;
    width: 377px;
    height: 598px;
    background:#000;
}

Answer 1

您在custom.css第36行有無效的CSS：

.homeWrapperContentLeft{
    width:628x; /* should be px not x */
    height:825px;
    background-color: red;
}

在第32行，將包裝的寬度指定為66px 。 請將其更改為auto或100% 。

.homeWrapper{
    padding: 12px;
    width:66px;
}

---

接下來的事情是，您的.homeWrapperContentLeft .brands類具有float: left並且將其保持在很小的寬度。 刪除width並float: left; 。

.homeWrapperContentLeft .brands{
    float:left;
    width:251px;
    height:598px;
    padding: 12px; 
    clear: both;
}

---

最后，從.brand取出.homeWrapperContentLeftCenter 。 這樣可以解決您的問題。