css - 包装定位问题

Question

我有一个包含多个 div 的包装器。我希望这个包装器水平居中并且我希望这个包装器包装它的所有内容(高度自动)。在下面“附加”的 JSFiddle 模板中，您会看到包装器包装了它的所有内容，但没有水平居中。如果我从包装器中删除 float 属性，它就会水平居中，但包装器不再包装其内容。希望有人可以帮助我同时居中和包裹。预先感谢您的回复。干杯。马克。

http://jsfiddle.net/xbcxs/1/

我的 HTML:

<div id="wrapper">
    <div id="column1" class="column">
        <div id="contentOne" class="content">contentOne</div>
        <div id="contentTwo" class="content">contentTwo</div>
    </div>
    <div id="column2" class="column">
        <div id="contentThree" class="content">contentThree</div>
    </div>
</div>

我的 CSS:

#wrapper {
    margin:10px auto;
    width:430px;
    float:left;
    height:auto;
    border:2px solid blue;
}

.content {
    border:1px solid black;
    background-color:yellow;
    width:200px;
    height:100px;
}

.column {
   float: left;        
}

#contentThree {
   height: 130px;        
}

Answer 1

将您的 #wrapper CSS 更改为:

#wrapper {
    margin:10px auto;
    width:430px;
    height:auto;
    border:2px solid blue;
    overflow:hidden;
}

更新的 jsFiddle:http://jsfiddle.net/xbcxs/2/