1

誰かがこのコードを手伝ってくれませんか？

HTML： 

<div id="container">
  <div class="block"> </div>
  <div class="block"> </div>
  <div class="block"> </div>
  <div class="block"> </div>
</div>

CSS： 

#container {
  margin:auto;
  text-align:center;
  padding:10%;
}
.block {
  width:240px;
  height:300px;
  background: red;
  display:inline-block;
}

jsfiddle

コンテナ全体が中央に揃うようにしたいのですが、下部に余分なブロックがある場合は、左側に配置する必要があります。それは可能ですか？

4

4 に答える 4

3

これは機能します：

HTML： 

#container {
  margin:auto;
  text-align:center;
  width:70px;
  overflow:hidden;}

CSS： 

.block {
  width:24px;
  height:30px;
  float:left;
  margin:5px 5px;
  background: red;}

こちらのjsfiddleをご覧ください。見やすくするためにサイズを変更しましたが、サイトに合わせて再調整できます。基本的にoverflow:hidden;、コンテナの幅は、次のブロックが下に配置されて左に配置されるように、行ごとに2ブロックしか収まらないように設定する必要があります。また、IDはページ内で一意である必要があることに注意してください。同じ定義を持つ複数の要素が必要な場合は、クラスを使用する必要があります。

于 2013-01-12T02:38:06.867 に答える
1

私はfloat: leftブロックIDで使用し、cssからコンテナーを削除し、idを1回使用する必要があるため、idの代わりにクラスを使用します。

HTML：

<div>
    <div class="block"> </div>
    <div class="block"> </div>
    <div class="block"> </div>
    <div class="block"> </div>
</div>

CSS：

.block {
    width:40%;
    height:300px;
    margin: 5%;
    float: left;
    background: red;
    display:block;
}
于 2013-01-12T02:34:23.013 に答える
0

jQuery用のこのプラグインを試して、DIVの整理に役立ててください。desGridLayout： http ://des.delestesoft.com:8080/?go=8

于 2013-01-12T02:27:35.937 に答える
0

私は@mediaクエリで自分の問題を解決しました：

@media screen and (max-width: 840px) {
.portfolio_container {
    width:512px;
    }
}

@media screen and (max-width: 580px) {
.portfolio_container {
    width:255px;
    }
}

メディアクエリは古いバージョンのブラウザと互換性がないことを知っています！しかし、少なくともそれはすべての最新バージョンでサポートされています！

于 2013-01-13T00:10:54.183 に答える