css - 4个盒子并排漂浮

Question

我想得到 4 个并排 float 的盒子。出于某种奇怪的原因，它们根本不起作用，任何样式也不适用于它们。

http://jsfiddle.net/u99A6/

这是我的 HTML:

<section>
    <article>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </article>
</section>

这是我的 CSS:

section {
    width: 100%;
}
section article {
    width: 1000px;
    padding: 20px;
    margin: auto;
}

.1-4-container,
.2-4-container,
.3-4-container,
.4-4-container {
    float: left;
}
.1-4-container {
    width: 25%;
}
.2-4-container {
    width: 50%;
}
.3-4-container {
    width: 75%;
}
.4-4-container {
    width: 100%;
}
.1-4-container p strong,
.2-4-container p strong,
.3-4-container p strong,
.4-4-container p strong {
    color: #4c4c4c !important;
    font-family: Arial, sans-serif;
}
.1-4-container p,
.2-4-container p,
.3-4-container p,
.4-4-container p {
    color: #939393;
    font-family: Arial, sans-serif;
}

我个人认为这段代码没有任何问题，但出于某种原因，它只是没有在 div 上应用样式。

Answer 1

您的代码无效。类和 ID 不能以数字开头:)

http://jsfiddle.net/u99A6/1/

将字母字符作为类名或 ID 的开头可以修复问题。

.hi1-4-container {
    width: 24%;
}

为了将来引用，您可以使用 http://jigsaw.w3.org/css-validator验证您的 CSS 以检查是否存在任何问题。您也可以使用 http://validator.w3.org/检查您的 HTML 是否存在任何验证问题。这将帮助您调试代码(不正确的 CSS 语法，或额外的 </div> 等)