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 を数字で始めることはできません:

/* 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 が指摘したように、フロートもクリアする必要があります。を使用して、フローティング div の後にもう 1 つの要素を挿入できますclear: both。個人的には、.clearfixクラスをよりセマンティックに使用します。

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

として使用する<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 は、HTML や CSS のどのリビジョンでも数字で始めることはできません。また、4 つのスタイルはすべて同じであるため、次のようなクラスを使用することをお勧めします。

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

そしてセット<div id="1d" class="inner">

これにより、コードが小さくなり、管理しやすくなり、後でコードに何かをする必要がある場合でも、変更が少なくなります。

于 2013-03-22T20:49:00.877 に答える
0

idは数字で始めることはできません。＃a1などに変更してみてください。しかし、メインdivのすべてのdivに同じプロパティを適用したい場合は、この方法を使用しないのはなぜですか？

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

他の人が言ったように、数字はIDの有効な始まりではありません

于 2013-03-22T20:47:52.060 に答える