1

我想实现这样

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

但是变成了这样

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

这是演示

4

10 回答 10

4

如果您不想增加宽度，请使用以下 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;}
于 2013-04-29T06:10:47.617 回答
3

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

<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/

于 2013-04-29T06:17:23.920 回答
0

你需要增加widthin .wrap，我把它增加到800并且都在一条线上

于 2013-04-29T06:05:28.083 回答
0

您有一个 500 像素的包装纸，并尝试在其中装入三 (3) 个 200 像素的盒子？那是行不通的……扩大你的包装，直到它适合你想要的所有盒子的总和。或者让你的盒子更小...

哦，请确保您将窗口放大到足以显示完整的 xxx 像素...

于 2013-04-29T06:07:44.667 回答
0

如果您需要做的就是将这些 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 指定了宽度

于 2013-04-29T06:07:54.907 回答
0

这是一种方法：

.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

于 2013-04-29T06:10:27.930 回答
0
  • 类 '.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;
}
于 2013-04-29T06:10:35.290 回答
0

你只需要做两件事：

  1. 浮动所有内部元素float: left;
  2. 给所有内部元素一个宽度：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/

于 2013-04-29T06:13:33.113 回答
0

在你 HTML 中的第一个类名是wrap cf但你只在你的 CSS 中使用wrap。我认为你需要将你的 3 div 设置在 500px 宽度内。使用我提到的 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 在我这边运行良好。希望它也适用于你这边。

于 2013-04-29T06:15:48.723 回答
0 
.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;}

谢谢

于 2013-04-29T06:17:11.147 回答