css div最大宽度不起作用

我认为这是我缺乏css知识，但是我没有得到这个东西的工作。我的目的是让一个容器div具有800px的MAXIUMUM，并且在页面中间对齐，根据可用的屏幕空间，每个“行”有一个或两个元素。但在这个例子中，你会看到整个800px被占用。如何实现800px只是最大的？css div最大宽度不起作用

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/

来源

2013-08-05 Jaap van Vliet

这只是DIV的行为方式。如果给它显示：inline-block，默认情况下它不会拉伸到最大宽度。 – MightyPork

我看到它正常工作。 800px只是最大宽度。如果您看到有所不同，请说明您正在使用哪种浏览器。 – andi

对我来说看起来工作正常，如果您的视口小于800 px – Pete

OK，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。

来源

2013-08-05 20:21:12

thanx您的建议，它只会小于800，但它不是我正在寻找的，我让我的目的更清晰（我希望）。 –

更新，看看 –

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

行内块是排列在一起的元素，而不是页面包。如果这是页面容器的中心，则不需要内联显示。

如果您希望文章以内联元素的形式显示，这似乎工作。

或者只是将您的样式添加到400px而不是340px。

来源

2013-08-05 20:36:25

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

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-05 21:36:57 dv8withn8

css div最大宽度不起作用

回答

相关问题