4个盒子彼此相邻

Question

我正试图让4个盒子相互浮动.出于某种奇怪的原因,它们只是不起作用,也没有任何造型工作.

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由于某种原因,它并没有在s 上应用样式.

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>等)