中心三个div并排

Question

我有三个div想要在页面上并排显示.我也有一些内容,如标签<p>和<h3>标签

HTML(示例)

<div id = "wrapper">

    <div class = "aboutleft"> 
        <h1> About us </h1>
        <h3> small description </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio nec 
            A few sentences about you go here 
        </p>
    </div>

    <div class = "vline"></div>

    <div class = "aboutright">
        <h1> About the shop/Clients </h1>
        <h3> small description </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio ne
            A few sentences about you go here 
        </p>
    </div>
</div>

CSS

.aboutleft
{
    display:inline-block;
    float:left;
    width: 450px;       
}

#wrapper
{
    text-align:center;
    width: 80%;
    margin: 0, auto;    
}
.aboutright
{
    display: inline-block;
    float:right;
    width: 450px;
}

.vline
{
    background: rgb(186,177,152);
    display: inline-block;
    float: left;
    min-height: 250px;
    margin: 0 30px;
    width: 1px;
}

结果就是3个div主要向左浮动.我想把它们全部放在页面上.

Answer 1

尝试没有float与text-align:center;上#wrapper.由于您的块是display:inline-block;,它们将以与文本相同的方式居中.

请注意,为了使其响应,我将所有宽度换成了%而不是px删除了一些额外的margin间距.我还添加vertical-align:top;了顶部的divs aline.

#wrapper{
    text-align:center;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.aboutleft,
.aboutright{
    display: inline-block;
    vertical-align:top;
    width: 48%;
}
.vline{
    background: rgb(186,177,152);
    display: inline-block;
    vertical-align:top;
    min-height: 250px;
    margin: 0;
    width: 1px;
}

http://jsfiddle.net/daCrosby/Ce3Uz/2/