1

画面の幅に基づいて画面の中央に配置するグリッド (画面上に 2 行: 4 つのボックスと 1 つのボックス) があります。最初の行に 4 つのボックスがあるか 2 つのボックスがあるかに関係なく、画面の中央に配置する必要があります。

私はJavaScriptでこれを達成できることを知っていますが、私の質問は - これはCSSで達成可能ですか?

私はいくつかの非常に単純なコードとJSFiddleを持っています:

HTML

<div id="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>       
        <li></li>
        <li></li>
    </ul>
</div>

CSS

*{
    margin: 0px;
    padding: 0px;
}

#container{
    width: 93%;
    margin: 0 auto;
}

ul{
    list-style-type: none;
    margin-top: 10px;
    margin-left: 10px;
}

ul li{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
4

2 に答える 2

2

バニラ CSS ソリューション、http://jsfiddle.net/MUaHz/3/ :

*{
    margin: 0px;
    padding: 0px;
}

#container{
    width: 93%;
    margin: 0 auto;
    border: 1px solid #009900;
}

ul{
    list-style-type: none;
    margin-top: 10px;

    margin: 0 auto;
    border: 1px solid #000099;
    text-align: center;
}

ul li{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}
于 2013-06-09T08:05:26.420 に答える
1

あなたはこれを使うことができます

#container{
position: fixed; top: 50%; left: 50%; width: 93%; height: 200px;
}
ul li{
position: relative; top: -50%; left: -50%; width: 100%; 
height: 100%; background-color:red; color: white;
margin-bottom: 5px;
border: 1px solid black;
}

http://jsfiddle.net/modaloda/MUaHz/2/

このリンクを参照してください:リンク

于 2013-06-09T07:59:38.483 に答える