首页 > web前端 > css教程 > 正文

如何在不使用表格的情况下水平对齐两个div?

Susan Sarandon
发布: 2024-11-22 13:37:10
原创
545 人浏览过

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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板