Question

我试图并排浮动4个div。它们在父div宽度= 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;
}

继承人.. http://jsfiddle.net/aM2UL/1/

谢谢！

Answer 1

我不能以数字开头：

/* 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在评论中指出的那样，你也应该清除你的花车。您可以使用clear: both在浮动的div之后再插入一个元素。我个人使用.clearfix类作为更多语义：

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

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

Answer 2

您当然 can use numbers to start IDs ，但您必须以不同方式选择它们。

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

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

Answer 3

id不能以HTML和/或CSS的任何版本中的数字开头，而且，所有4种样式都是相同的，所以最好使用像

这样的类

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

并设置<div id="1d" class="inner">

这将使您的代码更小，更易于管理，并且如果您以后需要对代码执行任何其他操作，则意味着更少的更改。

Answer 4

#bottomsections div{ float:left; width:25%}

正如其他人所说，数字不是ids的有效开头

Answer 5

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

#bottomsections div{ 
    width:25%;
    float:left;
    margin:0;
    padding:0;
}

如何在另一个div中浮动4个div

5 个答案: