css - 基本的 CSS 让我头疼

Question

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

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

这是最基本的 - 我想太阳已经到了我身上。

score 3 · Accepted Answer

默认情况下，Div 元素是 ,display: block和position: static-float: none因此它们会导致换行符，处于正常流程中，并且不会让后续内容在它们旁边冒泡。

如果您希望它们并排，则需要更改其中之一。

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

score 1 · Accepted Answer

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

尝试这个：

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

score 1 · Accepted Answer

div 是

display: block;

默认。如果您将它们更改为

display: inline-block;

它们应该并排出现。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

您必须定义属性float：

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

例子

score 0 · Accepted Answer

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

我希望这可以帮助你。

score 0 · Accepted Answer

您还需要修改“显示”属性。div 元素的默认值是块，除非另有说明，否则不接受它旁边的元素。

display: block 意味着元素显示为一个块，就像段落和标题一样。一个块的上下都有一些空格，并且它旁边不允许有任何 HTML 元素，除非有其他命令（例如，通过向另一个元素添加浮点声明）。 http://quirksmode.org/css/css2/display.html

你可以加：

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

或者你可以浮动第一个：

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

两者都应该基本上得到你想要的。这两种技术都需要注意一些额外的事情，例如浮动时的溢出或内联块的 IE7 hack，但这至少可以帮助您入门。

7 回答 7