css-layout-优快云博客

本文深入探讨了CSS中三种常见布局方式：Flex布局、Float布局及Inline-Block布局的使用技巧与场景，通过实例代码展示了每种布局的特点与适用范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title: css-layout
date: 2017-08-01 10:43:52
tags: Css
---

布局篇

css 常见的flex 布局篇

div.container-flex {
  display: flex;
  width:300px;
}
.container-flex img {
  vertical-align: middle;
}
.container-flex div {
  flex: 1;
  border: 1px solid red;
}
.container-flex .div2 {
  flex: 2;
}

<!-- flex -->
<div class="container-flex">
  <div class="div1">
    <img src="http://static-image.xfz.cn/1501208125_337.jpg" alt="">
  </div>
  <div class="div2">7月27日早间，红岭创投董事长周世平在“红岭社区”发帖称，网贷不是红岭擅长和看好的，最终会被清理出去，“清盘”过渡期大概要三年，到2020年年底，会将“现有产品全部清理完成”。 红岭作为网贷行业一家曾经的领军公司，至今仍有约192亿元的待收存量，周世平的此番言论迅速让媒体和行业都炸开了锅。 为什么突然说要清盘？接下来红岭要怎么做？网贷行业会怎么走？记者第一时间采访了周世平，还原周世平最原始、最真实的回答。
  </div>
</div>

常见的float布局篇

.container-float {
  margin-top: 50px;
  width:300px;
}
.container-float img {
  width:100px;
  vertical-align: bottom;
}
.right {
  font-size: 20px;
  line-height: 1;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.container-float .left {
  float: left;
}

<!-- float -->
<div class="container-float">
  <div class="left">
    <img src="http://static-image.xfz.cn/1501208125_337.jpg" alt="" width="800" height="200">
  </div>
  <div class="right clearfix">红岭作为网贷行业一家曾经的领军公司，至今仍有约192亿元的待收存量，周世平的此番言论迅速让媒体和行业都炸开了锅。红岭作为网贷行业一，周世平的此番言论迅速让媒体和行业都炸开了锅。红岭作为网贷行业一家曾经的领军公司，至今仍有约192亿元的待收</div>
</div>
<div style="border:1px solid red">
  <p>i am test clearfix</p>
</div>

常见的inline-block布局篇

.container-inlineBlock div {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background: #ccc;
  margin: 10px;
}

<!-- inline-block -->
<div class="container-inlineBlock">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div style="border:1px solid red">
  <p>i am test display inline block</p>
</div>

转载于:https://www.cnblogs.com/zerohu/p/7504155.html