Html 在中间两边各放两个div

我想在中间两边各放两个div

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

很抱歉，链接太少，无法上载图像

我想要这个：

不是这个（如果我使用“

文本对齐：居中”

”：

---

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

像

---

您需要为align添加一个额外的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>

---

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

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

演示：

---

这个想法是将左div的

右：50%

和右div的

左：50%

回答得好！我想这正是OP想要的。

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

.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
}

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