float 实现常用布局

[PolluxLee]

两列定宽布局

左右两侧都固定宽度

<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

.content {
  width: 950px;
  height: 200px;
  margin: 0 auto;
}

.left {
  width: 230px;
  height: 200px;
  float: left;
  background: #FF0097;
}

.right {
  width: 710px;
  height: 200px;
  float: right;
  background: #4EB3B9;
}

两列右侧自适应布局

左侧定宽，右侧自适应

<div class="left"></div>
<div class="right">
  <div class="content"></div>
</div>

.left {
  width: 190px;
  height: 200px;
  float: left;
  background: #4EB3B9;
  margin-right: -190px;
}

.right {
  width: 100%;
  float: right;
}

.content {
  margin-left: 200px;
  height: 200px;
  background: #FF0097;
}

两列左侧自适应布局

左侧定宽，右侧自适应

<div class="left">
  <div class="content"></div>
</div>
<div class="right"></div>
<script src="./index.js"></script>

.left {
  width: 100%;
  float: left;
}

.right {
  width: 190px;
  height: 200px;
  float: right;
  background: #4EB3B9;
  margin-left: -190px;
}

.content {
  margin-right: 200px;
  height: 200px;
  background: #FF0097;
}

三列中间自适应

左右两侧定宽，中间自适应

<div class="left"></div>
<div class="middle">
  <div class="content"></div>
</div>
<div class="right"></div>

.middle {
  width: 100%;
  float: left;
}

.content {
  height: 200px;
  margin-left: 240px;
  margin-right: 200px;
  background: blueviolet;
}

.left {
  width: 230px;
  height: 200px;
  float: left;
  margin-right: -230px;
  background: #FF0097;
}

.right {
  width: 190px;
  height: 200px;
  margin-left: -190px;
  float: right;
  background: #4EB3B9;
}

三列右侧自适应布局

<div class="left1"></div>
<div class="left2"></div>
<div class="right">
  <div class="content"></div>
</div>

.left1 {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 10px;
  background: #FF0097;
}

.left2 {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 10px;
  background: #4EB3B9;
}

.right {
  width: 100%;
  float: right;
  margin-left: -420px;
}

.content {
  height: 200px;
  margin-left: 420px;
  background: blueviolet;
}