将多个 div 重新对齐到一个固定的 div答案

【问题标题】：Realign multiple divs into a fixed div将多个 div 重新对齐到一个固定的 div
【发布时间】：2013-10-14 18:58:38
【问题描述】：

我已经厌倦了像下面的图片那样对齐 div 框：

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

JSBIN

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

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

【问题讨论】：

感谢@Mr_Green 回复了我的帖子，温馨的问候

标签： css html layout

【解决方案1】：

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

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

【讨论】：

哇，这是一个非常好的解决方案，感谢@VoodooDS 的快速响应，我认为它确实提供了一个很好的解决方案。因为是由于我对CSS的了解非常少。对此，我承诺会落实您的建议。

【解决方案2】：

我已经使用 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;
}

【讨论】：

我认为这两种方案都可以解决问题，我会尝试这种方式，以适合我的方案，谢谢......