应用视觉设计：「15」使用 float 属性将元素设置两列左右布局

路条编程 2020-08-31

958

欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。

今天我们要介绍的内容是使用 float 属性将元素设置两列左右布局。我们接下来介绍的下一个定位工具实际并没有使用 position 属性，而通过浮动 float 属性来实现的。CSS 中，任何元素都可以通过 float 属性进行浮动，取值 left 让一个元素向左浮动，取值 right 则向右浮动。浮动元素将从文档的正常流中移除，根据设置的 left 或 right 属性将元素推送到其包含父元素的左侧或右侧。它通常与 width 属性一起使用，以指定浮动元素需要多少水平空间。

浮动会影响包含块中的布局，如果一个包含块中存在浮动框，则先让所有的框按照普通流中的位置摆放，再将浮动框从文档流中取出来，并让浮动框从包含块的顶部开始，根据浮动方向一个接一个地水平排列。向左浮动的元素，尽可能向左移动，直到碰到包含块的左边界。向右浮动的元素，尽可能向右移动，直到碰到包含块的右边界。

一个浮动元素，无论它是块级元素，还是行内级元素，都会生成一个块级框，并可以为它指定宽度和高度。如果没有显式设置宽度和高度，它的宽度和高度由其内容决定，但不超过包含块的宽度和高度。

在文章 “使用 position 属性的 fixed 值实现标题栏及导航栏固定在顶部” 代码基础上，在 style 区增加以下代码：

<style type="text/css">
  .two-columns{
    margin-top: 20px;
    width: 100%;
    padding: 10px 0px;
  }


  .sec-left {
    float: left;
    width: 50%;
    height: 80px;
    border: 1px dashed #ccc;
  }


  .sec-right {
    float: right;
    text-align: right;
    width: 50%;
    height: 80px;
    border: 1px dashed #ccc;
  }
</style>

以上代码增加了一个两列容器类 .two-columns , 增加了左右两列类 .sec-left 和 .sec-right ， .sec-left 类设置为左浮动，占父元素宽度的一半。.sec-right 类设置了右浮动，占父元素宽度的一半。为了便于查看浮动的效果，左右两列浮动元素设置了边框。

页面代码调整如下：

<div class="two-columns">
    <section class="sec-left">
        <h1 style="font-size: 21px">Welcome H1 </h1>
        <h2 style="font-size: 18px">Welcome H2</h2>
        <h3 style="font-size: 16px">Welcome H3</h3>
    </section>
     <section class="sec-right">
        <h4 style="text-align:right; font-size:16px;">Welcome H4</h4>
        <h5>Welcome H5</h5>
        <h6>Welcome H6</h6>
    </section>
</div>

为了更好的排版效果，将 h1-h3 标题元素设置了内嵌字体大小分别为 21px、18px、16px，将 h4-h6 水平方向右对齐。

保存页面，大家可以通过示例页面或下面的完整效果图比较下应用样式的效果，调整页面效果如下：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

应用视觉设计：「15」使用 float 属性将元素设置两列左右布局

评论