-1

問題：

含まれているdivを中央に配置したいのですが、ブロックも左揃えにしたいです。フレックスボックスが解決策かもしれないと思いますが、どうすればよいかわかりません。私はこれをしたい：

  • Javascriptなし
  • テーブルなし
  • 行幅を設定せずに (行幅は動的でなければなりません..それがこの演習の目的です)
  • コンテナに幅を設定せずに。(行幅の設定と同じ)
  • 非表示の div を追加せずに。(行幅の設定と同じ)

例、現在の CSS を使用 (試行は失敗):

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
}
.container {
 display    : inline-block;
 text-align : center;
}

http://jsfiddle.net/SKRjG/

編集：これがどのように見えるかを示すJavascriptバージョンです： http://jsfiddle.net/SKRjG/8/

4

2 に答える 2

1

次のように div を別のコンテナー内に配置します。

<div class="container">
  <div class="subcontainer">
    <div class="Block"></div>ETC
  </div>
</div>

次に @media クエリを使用して .subcontainer の幅を変更し、ブロックを完全なグリッドに合わせます。次に、.subcontainer div を margin: 0 auto; で中央に配置します。

CSS は次のようになります。

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
}
.subcontainer {
    text-align:left;
    margin:0 auto;
}
/*Three columns*/
 @media (min-width: 495px){
.subcontainer{width:495px;}
 }
/*Four columns*/
 @media (min-width: 660px){
.subcontainer{width:660px;}
 }
/*Five*/
@media (min-width: 825px){
.subcontainer{width:825px;}
 }

フィドル: http://jsfiddle.net/TM2wB/26/

于 2013-10-08T07:58:57.913 に答える