Question

我正试图让4个盒子相互浮动。由于一些奇怪的原因，它们只是不起作用，也没有任何造型工作。

这是我的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>等。）

Answer 2

如果div彼此相邻浮动，那么总宽度必须加起来为100％。您目前正在将所有div添加到250％。

所以基本上你需要使每个宽度为25％

希望有所帮助！

Answer 3

不要在选择器之前使用数字（Div，Id）
只需使用字母

4个盒子彼此相邻

3 个答案: