3

このCSSを考えると：

#parent {
    width: 100px;
    height: 100px; 
    background-color: #090;
}
.childs {
    width: 50px;
    height: 50px; 
    background-color: #009;
    border: 1px solid #999;
}

そしてこのhtml：

   <div id="parent">
        <div class="childs"><p>aaa</p></div>
        <div class="childs"></div>
        <div class="childs"></div>
   </div>

これはデモ http://jsfiddle.net/A3PJu/2/です

子 div を垂直ではなく水平に配置したいのですが (現在のように)、どのように作成しますか?

float: left子タグの場合、この場合は機能しません

4

2 に答える 2

6

display:inline-blockをwhite-space:nowrapで使用できます。次のように書きます。

#parent {
        width: 100px;
        height: 100px;
        background-color: #090;
        white-space:nowrap;
        font-size:0;
    }
    .childs {
        width: 50px;
        height: 50px;
        background-color: #008;
        border: 1px solid #999;
        display:inline-block;
        *display:inline;/* For IE7 */
        *zoom:1;/* For IE7 */
        white-space:normal;
        font-size:13px;
        vertical-align:top;
    }

これをチェックしてくださいhttp://jsfiddle.net/A3PJu/3/

于 2012-09-13T10:44:07.833 に答える
0

問題は、親要素の幅が 50px の 3 倍に十分な大きさではないこと.childsです。幅#parentを 200px にfloat: leftするとうまくいきます。

于 2012-09-13T10:41:21.763 に答える