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;}

Answer 2

您的代码很好，但您需要更改元素的顺序：

<div class="wrap cf">
    <div class="one">one</div>
    <div class="three">three</div>
    <div class="two">two</div> <!-- put the element without class right to the end -->
</div>

http://jsfiddle.net/bFqTv/30/

Answer 3

您需要增加width中的.wrap，我将其增加到800并且所有内容都在一行中

Answer 4

你有一个500px的包装，并尝试在200px中装入三（3）个盒子？这是行不通的...放大你的包装，直到它适合你想要的所有盒子的总和。或者让你的盒子变小......

哦，并确保放大窗口足以显示完整的xxx像素......

Answer 5

如果您需要做的就是将这些DIV（一，二和三）保持在一排，它们都需要像这样适合500px：

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

另请注意，我为每个DIV指定了宽度

Answer 6

这是一种方法：

.wrap{width: 500px;overflow:hidden; background: red; position: relative; margin: 0 auto;}
.one{width: 200px; float: left; background: blue;}
.three{width: 200px; float: left; background: blue;}
.two{width: 100px; float: left;}

请正确清除浮动而不仅仅是overflow: hidden

Answer 7

带有'.two'类的div（这是3个框的中间）是一个块元素，没有任何给定的左右浮动，因此它会清除占用第一行的剩余空间。
此外，您添加到'.two'的边距不是必需的。
最后你忘记了css中的'.cf'（clearfix的代码）。

这是一个可能的解决方案： http://jsfiddle.net/bFqTv/28/

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

/**Source:http://nicolasgallagher.com/micro-clearfix-hack/**/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}


/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Answer 8

你只需要做两件事：

使用float: left;
为所有内部元素添加宽度：width: 33%

更新了CSS：

.wrap{
  width: 500px;
  margin: 0 auto;
}
.one, .two, .three {
  float: left;
  width: 33%;
}
.one, .three {
  background-color: blue;
}
.two{
  background-color: red;
}

您的HTML：

<div class="wrap cf">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

以下是一个有效的例子：http://jsfiddle.net/bFqTv/29/

Answer 9

在HTML中的第一个类名是 wrap cf ，但是你在CSS中只使用 wrap 。我认为你需要在500px宽度内设置你的3 div。像我提到的那样使用CSS

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

这个CSS很适合我。希望它也适合你。

Answer 10

.wrap{width: 500px; background: red; position: relative; margin: 0 auto}
.one{width: 100px; float: left; background: blue;}
.three{width: 100px; float: left; background: blue;}
.two{width:100px; float: left;}

如果需要背景红色以便在第二个div下面使用

.wrap{width: 500px; background: red; position: relative; margin: 0 auto}
.one{width: 100px; float: left; background: blue;}
.three{width: 100px; float: left; background: blue;}
.two{width:100px; float: left; background: red;}

由于

保证金不起作用，因为它应该工作

10 个答案: