Question

我认为这是我缺乏css知识，但我没有把这件事搞定。我的目的是有一个容器div，它的MAXIUMUM为800px，并在页面中间对齐，每个'row'有一个或两个元素，具体取决于可用的屏幕空间。但是在这个例子中，你看到整个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

好的，here you go：

#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（如果您希望它们显示的话）。说实话，你最好只是正确地计算宽度，但如果你真的不能，试试这个。此外，我已采用您的容器元素，删除内联样式并添加了ID #container。

Answer 2

使用display：block;而不是内联。

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

如果您希望文章显示为内联元素，那么这似乎有效。

或者只计算你的风格，最多可以加400px而不是340px。

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

css div max-width不起作用

3 个答案: