css - css div最大宽度不起作用

Question

我认为这是我缺乏 css 知识，但我没有让这件事起作用。我的目的是拥有一个容器 div，其最大宽度为 800px，并在页面中间对齐，每个“行”有一个或两个元素，具体取决于可用的屏幕空间。但是在示例中，您会看到整个 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/

Answer 1

好的，给你：

#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;
}

您需要添加一个.row元素来contentgedeelte成对包装您的 s （如果这是您希望它们显示的方式）。老实说，你最好只正确计算宽度，但如果你真的不能，试试这个。另外，我已经使用了您的容器元素，删除了内联样式并添加了 ID #container。

Answer 2

使用显示：块；而不是内联。

内联块用于并排排列的元素，而不是用于页面换行。如果这是页面容器的中心，则无需显示内联。

如果您希望文章显示为内联元素，那似乎可行。

或者只是计算您的样式以添加最多 400 像素而不是 340 像素。

Answer 3

你需要更多的结构。见下文。

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;
}