css - 将多个 div 重新对齐到一个固定的 div

Question

我厌倦了尝试对齐 div 框，如下图所示：

我已经尝试过我在这个链接中所做的编码，

JSBIN

如图所示，如何最好地解决问题并根据需要调整布局？

非常感谢任何帮助，在此先感谢

Answer 1

我不确定这是否是您想要做的，但我以这种方式解决了它：http: //jsbin.com/ebuRAFe/4/

我认为您的标记/ css 的问题是，您的想法有点太复杂了。您所要做的就是适当地浮动您的盒子并使用百分比度量。

Answer 2

我已经使用 JSFiddle 快速完成了它，这就是我想出的。您应该能够使用它并将其更改为您想要的方式。

更新：在这里演示

HTML：

<div class="con">
    <div class="left">
        <div class="box">Text Text Text Text</div> <span class="underbox">3 Days ago</span>

        <div class="box">Text Text Text Text</div> <span class="underbox">3 Days ago</span>

    </div>
    <div class="right">
        <div class="textwall">
            <div class="image">Image here</div>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
    </div>
</div>

CSS：

.con {
    width: 500px;
    height: 200px;
    border: #000000 solid 1px;
}
.left {
    float: left;
    width: 50%;
    height: 100%;
    border: #000000 solid 1px;
}
.right {
    float: right;
    width: 49%;
    height: 100%;
    border: #000000 solid 1px;
}
.box {
    width: 90%;
    height: 20%;
    border: #000000 solid 1px;
    margin: 0 auto;
    margin-top: 5px;
}
.underbox {
    margin-left: 15px;
    margin-bottom: 10px;
}

.textwall {
    margin: 10px;
}
.image {
    float: left;
    width: 70px;
    height: 70px;
    background: red;
    margin: 5px;
}