3

私のCSS知識不足だと思いますが、うまくいきません。私の目的は、使用可能な画面スペースに応じて、「行」ごとに 1 つまたは 2 つの要素を使用して、最大幅 800px のコンテナー div をページの中央に配置することです。しかし、この例では、800px 全体が使用されていることがわかります。800pxが最大であることをどのように達成するのですか?

HTML:

<div style="background-color:red;max-width:800px;display: inline-block">
  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>

  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>

  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>

  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>
</div>

CSS:

.contentgedeelte {
  width:310px;
  background:white;
  margin:10px;
  float:left;
  border-radius:5px;
  padding:5px;
}

http://jsfiddle.net/plunje/LmJSy/

4

3 に答える 3

3

OK、どうぞ:

#container {
    width:800px;
    margin:0 auto;
    text-align:center;
}
.row { 
    display:inline-block;
    background:red;
    margin:0 auto;
}
.contentgedeelte {
    width:310px;
    background:white;
    margin:10px;
    border-radius:5px;
    padding:5px;
    display:inline-block;
    text-align:center;
}

.rows をペアでラップする要素を追加する必要がありますcontentgedeelte(そのように表示したい場合)。正直なところ、幅を適切に計算した方がよいのですが、本当にできない場合は、これを試してください。また、コンテナ要素を取得し、インライン スタイルを削除して ID を追加しました#container。

于 2013-08-05T20:21:12.087 に答える
1

display: block を使用します。インラインの代わりに。

インラインブロックは、ページラップではなく、横に並んでいる要素用です。これがページ コンテナの中心である場合、インラインで表示する必要はありません。

記事をインライン要素として表示したい場合は、うまくいくようです。

または、スタイルを集計して、340px ではなく 400px まで追加します。

于 2013-08-05T20:36:25.130 に答える
0

もう少し構造が必要です。下記参照。

HTML

<div class="container">
<div class="row">
    <div class="contentgedeelte">
            <h2>nieuws</h2>
    </div>
    <div class="contentgedeelte">
            <h2>nieuws</h2>
    </div>
</div>
<div class="row">
    <div class="contentgedeelte">
            <h2>nieuws</h2>
    </div>
    <div class="contentgedeelte">
            <h2>nieuws</h2>
    </div>
</div>
</div>

CSS

* {
    box-sizing: border-box;
}
.container {
    max-width: 800px;
    background-color: red;
    padding: 1em;
    overflow: hidden;
}
.contentgedeelte {
    width:48%;
    background:white;
    margin:1%;
    float:left;
    border-radius:5px;
    padding:5px;
    display: block;
}
于 2013-08-05T21:36:57.230 に答える