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 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/

Answer 2

是

margin: 0 auto

没有逗号

但你的div也可能所有都有

float: left

也是。然后他们将从左侧穿过页面。

永

Answer 3

请勿在保证金中使用。在你的CSS中使用.wrapper将解决这个问题。

margin: 0 auto;

另外，如果你对包装器的子节点使用绝对宽度，你也可以使用一个固定值作为包装器，因为这会使div与子节点居中。

Answer 4

你可以删除你的花车。在包装器上使用text-align:center会将display:inline-block元素并排排列。

我这样做了你的内容。我还添加了一个'centerstuff'div，你应该将中心内容放入其中，并使宽度变小，以便更加明显。

http://jsfiddle.net/rNcHY/

只是margin: 0 auto，正如其他人所说的那样。

中心三个div并排

4 个答案: