首頁 > web前端 > css教學 > 如何在不使用表格的情況下水平對齊兩個div?

如何在不使用表格的情況下水平對齊兩個div?

Susan Sarandon
發布: 2024-11-22 13:37:10
原創
622 人瀏覽過

How Can I Horizontally Align Two Divs Without Using Tables?

Div 的水平對齊

常見的版面任務是水平對齊兩個 div,每個 div 包含自己的標題和清單。雖然表格可以輕鬆實現這一點,但使用表格進行佈局通常是不可取的。要水平對齊 div 而不借助表格,請考慮以下方法:

父容器中的浮動 Div

父容器中的浮動 div。浮動允許 div 水平相鄰放置。確保父容器的樣式如下:

.aParent div {
    float: left;
    clear: none;
}
登入後複製
  • float: left:使 div 在父容器中向左浮動。
  • clear: none:允許div 旁邊流動彼此沒有清除line.

範例

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
</div>
登入後複製

使用這種方法,div將水平對齊,每個div 都包含其標題和列表,而不需要表格.

以上是如何在不使用表格的情況下水平對齊兩個div?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板