2

200 x 200 の div のリストを取得しましたが、それらは垂直に表示され、メトロ UI のようにサイト全体を水平に駆動したいと考えています。

body {
    background-color: blue;
}

div {
    display: inline;
    background-color:black;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 5px;
    border: solid 2px yellow;
}

display: inline を適用すると、それらはすべて縮小しますか??? なぜDO：コメントを外す表示：インライン。jsfiddle cssで見てください

http://jsfiddle.net/uVY5V/3/

すべてを水平またはインラインに配置する良い方法は何ですか

4

6 に答える 6

1

インライン要素には幅や高さを設定できません。

ブロック要素を並べることはできません (float不正行為です:p)

display:inline-block両方の世界で最高です;）

于 2013-06-16T03:41:06.103 に答える
0

まさにあなたが望むものに依存します。これにより、幅の最後まで水平になります。 Jsフィドル

HTML:

<div id="search_tile" class="search_tile"></div>
<div id="timeline_tile" class="timeline_tile"></div>
<div id="conversations_tile" class="conversations_tile"></div>
<div id="source_tile" class="source_tile"></div>
<div id="11_tile" class="demo_11_tile"></div>
<div id="14_tile" class="demo_14_tile"></div>
<div id="12_tile" class="demo_12_tile"></div>
<div id="13_tile" class="demo_13_tile"></div>

CSS:

body
{
background-color: blue;
width:100%;
}

div{  
    /*display: inline;*/
    display:inline-block;
    background-color:black; 
    width: 200px; 
    height: 200px; 
    margin: 10px; 
    padding: 5px; 
    border: solid 2px yellow;

}
于 2013-06-16T03:42:16.247 に答える
0

テーブルを置き去りにして以来、私たちはほとんどレイアウトにフロートを使用してきました。これはしばしばトラブルを引き起こす風変わりな解決策ですが、何をしているのかを知っていればうまくいきます。

最近ますます注目されている float の興味深い代替手段の 1 つは、要素の表示値を inline-block に設定することです。

div{  
        display: inline-block;
        background-color:black; 
        width: 200px; 
        height: 200px; 
        margin: 10px; 
        padding: 5px; 
        border: solid 2px yellow;

    }
于 2013-06-16T03:43:05.313 に答える