0

我试图并排浮动 4 个 div。它们在父 div width = 100% 中，每个子 div 是 width:25% 也没有边距或填充......它们没有正确显示！

这是代码...

<div id="bottomsections">
    <div id="1a">
            <h1>a</h1>

        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
    </div>
    <div id="1b">
            <h1>b</h1>  
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
    </div>
    <div id="1c">
            <h1>c</h1>  
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
    </div>
    <div id="1d">
            <h1>d</h1>  
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
    </div>

和CSS...

#bottomsections {
    width:100%;
}
#1a {
    width:25%;
    float:left;
    margin:0;
    padding:0;
}
#1b {
    width:25%;
    float:left;
    margin:0;
    padding:0;
}
#1c {
    width:25%;
    float:left;
    margin:0;
    padding:0;
}
#1d {
    width:25%;
    float:left;
    margin:0;
    padding:0;
}

这是小提琴.. http://jsfiddle.net/aM2UL/1/

谢谢！

4

5 回答 5

6

Id can not start with a number:

/* change #1a to #a1 */
#a1 {
    width:25%;
    float:left;
    margin:0;
    padding:0;
}

http://jsfiddle.net/dfsq/aM2UL/3/

Refer this comprehensive answer about what characters are allowed: https://stackoverflow.com/a/449000/949476

Upd: As pointed by Allendar in comments you should also clear your floats. You can insert one more element after your floated divs with clear: both. Personally I use .clearfix class as more semantic:

.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}

to be used as <div id="bottomsections" class="clearfix">...</div>

于 2013-03-22T20:46:47.663 回答
3

您当然可以使用数字来启动 ID，但您必须以不同的方式选择它们。

[id="1a"], [id="1b"], [id="1c"], [id="1d"] {
    width:25%;
    float:left;
    margin:0;
    padding:0;
}

http://jsfiddle.net/aM2UL/11/

于 2013-03-22T20:53:42.223 回答
2

id's cannot start with numbers in any revision of HTML and/or CSS, also, all 4 of your styles are the same, so you would be better off using a class such as 

div.inner {
    width:25%;
    float:left;
    margin:0;
    padding:0;
}

and set <div id="1d" class="inner">

this will keep your code smaller and more manageable and mean less changes if and when you need to do anything else to the code later on.

于 2013-03-22T20:49:00.877 回答
0 
#bottomsections div{ float:left; width:25%}

As others have said, numbers aren't valid beginnings to ids

于 2013-03-22T20:47:52.060 回答
0

ids 不能以数字开头，尝试更改为#a1 或其他内容。但是如果你想在你的主 div 的所有 div 中应用相同的属性，为什么不这样做呢？

#bottomsections div{ 
    width:25%;
    float:left;
    margin:0;
    padding:0;
}
于 2013-03-22T20:51:56.560 回答