4个盒子彼此相邻

I'm trying to get 4 boxes that float next to each other. For some strange reason, they just won't work, nor does any styling work on them.

我正试图让4个盒子相互浮动。出于某些奇怪的原因,他们只是不会工作,也没有任何造型工作。

http://jsfiddle.net/u99A6/

Here is my HTML:

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

And here is my CSS:

这是我的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;
}

I personally see nothing wrong with this code, but it just doesn't apply the styling on the divs for some reason.

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

3 个解决方案

#1

Your code is invalid. Classes and IDs cannot start with numbers :)

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

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

Having an alpha character as the start of a class name or ID fixes issues.

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

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

For future reference, you can use http://jigsaw.w3.org/css-validator to validate your CSS to check for any issues. You can also use http://validator.w3.org/ to check your HTML for any validation issues. This will help you debug your code (incorrect CSS syntax, or an extra </div> etc.)

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

#2

If the divs are floating next to each other then the total width must add up to be 100%. You are currently adding all the divs up to be 250%.

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

So basically you need to make each width 25%

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

Hope that helps!

希望有所帮助!

#3

Do not use Numbers Before the Selectors (Div, Id)
Just use alphabets

不要在选择器之前使用数字(Div,Id)只需使用字母表

#1