将多个div重新排列为固定div

Question

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

我已尝试使用我在此链接中所做的编码，

JSBIN

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

非常感谢任何帮助， 提前谢谢

Answer 1

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

更新：DEMO HERE

<强> 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;
}

Answer 2

我不确定这是不是你想要做的，但我这样解决了： http://jsbin.com/ebuRAFe/4/

我认为你的标记/ CSS的问题是，你认为有点过于复杂。您所要做的就是适当地漂浮您的盒子并使用百分比度量。