把两个div放在中心的两边

Question

我想从中心两侧放两个div。

<div class="wrap">
   <div class="left"></div>
   <div class="right"></div>
</div>

对于链接感到抱歉，由于搜索率低而无法上传图片。

我想要这个：

不是这个（如果我使用＆＃34; text-align: center＆＃34;）：

Answer 1

您需要为对齐添加额外的div：

<div class="wrap">
    <div class="left">
        <div class="inner">blah</div>
    </div>
    <div class="right">
        <div class="inner">blah blah blah blah blahblahblahblah blah blah</div>
    </div>
</div>

然后在CSS

.wrap {
    display:block;
}
.left, .right {
    display:inline-block;
    width:49.5%;
}
.left {
    text-align:right
}
.right {
    text-align:left
}
.inner {
    background:#ccc;
    padding:20px;
    width:auto;
    display:inline
}

See fiddle

Answer 2

你可以将主包装分成两部分，然后在每一侧浮动div

喜欢

<div class="wrap">
 <div class="half_div">
   <div class="left"></div>
 </div>
 <div class="half_div">
   <div class="right"></div>
 </div>
 </div>

css as：

.half_div{
 width:50%;
 }

Answer 3

您可以通过使用左右div的位置相对和绝对来实现此目的：

.wrap {position: relative;}
.wrap > div {position: absolute;}
.wrap .left {
    right: 50%;
    ...
}
.wrap .right {
    left: 50%;
    ...
}

演示：http://jsfiddle.net/dfsq/epoe0uct/1/

我们的想法是设置左侧的right: 50%和右侧的left: 50%。