html - margin 不起作用，因为它应该起作用

Question

我想达到这样的效果

+-----------+----------------+----------------+
|           |                |                |
+-----------+----------------+----------------+

但是变成了这样

+-----------+----------------+
|           |                |
+-----------+----------------+----------------+
                             |                |
                             +----------------+

这是 DEMO

Answer 1

如果您不想增加宽度，请使用以下 CSS:

.wrap cf{width: 500px; background: red; position: relative;}
.one{width: 200px; float: left; background: blue;}
.three{width: 200px; background: blue;float:left;}
.two{width:200px;float:left;background:red;}