CSS 基础学习-140 css图像并排布局实例

由 hrs, 30 十月, 2021

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        *{
          box-sizing:border-box;
        }
        .big::after{
          content:"";
          clear:both;
          display:table;/*自动大小*/
        }
        .box{
          float:left;
          width:33.33%;
          padding:10px;
        }
    </style>
  </head>
  <body>
    <h1>图像并排布局实例</h1>
    <p>并排浮动图像</p>
    <div class="big">
      <div class="box"><img src="img/tulip.jpg" alt="Tulip" style="width:100%"></img></div>
      <div class="box"><img src="img/tulip-2.jpg" alt="Tulip" style="width:100%"></img></div>
      <div class="box"><img src="img/flower-4.jpg" alt="Tulip" style="width:100%"></img></div>
    </div>
    <p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性以确保图像容器不会由于额外的内边距（填充）而损坏。请尝试删除此代码以查看效果。</p>
  </body>
</html>
~

运行效果：

css-140.png

标签

评论