使用 float+margin
(1) 原理, 用法
原理: 通过将左框脱离文本流, 加上右框向右移动一定的距离, 以达到视觉上的多列布局.
用法: 先将左框设置为 float:left, 再设置右框 margin-left.
- <style type="text/CSS">
- .left {
- float: left;
- width: 100px;
- border: 1px solid red;
- }
- .right {
- margin-left: 120px;
- border: 1px solid blue;
- }
- .parent{
- border: 1px solid green;
- }
- </style>
- <p class="parent">
- <p class="left">
- <p>left</p>
- </p>
- <p class="right">
- <p>right</p>
- <p>right</p>
- </p>
- </p>
来源: https://www.2cto.com/kf/201805/746117.html