基本的CSS沸腾了我的脑袋

Question

.long {
width: 100%;
}
.short {
width: 49.2%;
}

我已经定义了上面的类但是由于某种原因，当我引用2个短div时，它们位于不同的行上（并非如预期的那样并排）。

这是最基本的 - 我认为太阳已经找到了我。

Answer 1

默认情况下，Div元素为display: block，position: static和float: none - 因此它们会导致换行，处于正常流程，并且不会让跟随内容冒泡到它们旁边

如果你想并排，你需要更改其中一个。

display: inline-block可能是你最好的选择。

Answer 2

这是因为<div>是块元素，而不是内联元素。

试试这个：

.long {
    width: 100%;
}
.short {
    width: 49.2%;
    display: inline-block;
}

Answer 3

Divs

display: block;

默认情况下。如果你将它们改为

display: inline-block;

它们应该并排出现。

Answer 4

Div是块元素，因此它们不会彼此相邻显示，除非您向其中一个或两个添加浮点数。 （此外，.long类将使div跨越整个容器，这将排除其旁边显示的任何其他元素。）

.long {
    float: left;
    width: 100%;
}
.short {
    float: left;
    width: 49.2%;
}

Answer 5

您必须定义属性float：

.short {
    float: left;
    width: 49.2%;
}

实施例

http://jsfiddle.net/7eS22/

Answer 6

您可以使用display: inline-block;或浮动您的div，例如float:left;。

我希望这可以帮到你。

Answer 7

您还需要修改“display”属性。 div元素的默认值是block，除非另有说明，否则不会在其旁边接受任何元素。

  

display：block表示元素显示为块，如   段落和标题一直都是。块有一些空格   除了之外，它上面和下面都不容忍它旁边没有HTML元素   在另外订购时（通过向另一个人添加浮动声明）   例如，元素）。   http://quirksmode.org/css/css2/display.html

您可以添加：

.short { width: 49.2%; display: inline-block; }

或者你可以浮动第一个：

.short:first-child { float: left; }

要么基本上能得到你想要的东西。对于这两种技术还有其他注意事项，例如浮动时溢出或内联块的IE7攻击，但这至少可以让你开始。