css - 如何在另一个div中 float 4个div

Question

我正在尝试并排 float 4 个 div。它们位于父 div width = 100% 中，每个子 div 的宽度为: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;
}

这是 fiddle .. http://jsfiddle.net/aM2UL/1/

谢谢!

Answer 1

ID不能以数字开头:

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

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

请引用这个关于允许使用哪些字符的综合答案:https://stackoverflow.com/a/449000/949476

Upd:正如 Allendar 在评论中指出的那样，您还应该清除 float 。您可以使用 clear: both 在 float div 之后再插入一个元素.我个人使用 .clearfix分类为更具语义:

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

用作<div id="bottomsections" class="clearfix">...</div>