Html 浮动布局//如何将第三个div正确定位在第一个div下

有这么多关于浮动的问题，以找到我的确切问题，对不起，如果我张贴了一份副本

如果浏览器宽度不足以支持div 2的右边，我希望div 3直接位于div 1之下。 我发现向左浮动是最好的选择

问题是，即使浮动到左侧，div 3也会低于div 2的高度。 有没有简单的方法来解决这个问题，让div2看起来像是向右浮动的。我不能这样做，因为我不想要容器元素的固定宽度

目标：我希望左一个看起来和右一个一模一样，只是不使用：float:right；因为我不想要固定的页面宽度。我希望这能让事情变得更清楚

我知道CSS中的@media属性，但如果可能的话，我想学习更简单的解决方案

编辑：

通过以下方式成功破解：

一是相对于1的绝对位置。然后添加向左浮动且可见性为：无的固定器；宽度与2相同，高度较小

---

我想我找到了工作黑客：

div 1是相对的，向左浮动。 div2是绝对的，并使用{left:}属性定位到右侧。 div 3向左浮动

然后只需将{margin right:}添加到div1中，中间有div2 width+边距

感谢那些向我暗示正确方向的人： 非常感谢你

HTML:

---

无论浏览器宽度如何，div 1和div 3是否始终保持相同的宽度？看起来您在第二个容器中完成了所需的操作？？是的，它们都以像素宽度为单位，如示例所示，只是没有容器元素。是的，Danield，但我不希望页面中有容器元素：如果屏幕足够大，我希望div3位于div2的右侧。第二个容器只是为了显示我想要它的样子。我想我找到了正在工作的黑客，还不能回答我的问题，因为新帐户必须等待8个小时：Credits to@KingKing for idea。div 1是相对的，向左浮动。div 2是绝对的，并使用left:property定位在右侧。div向左浮动。然后只需将边距向右添加到div1，中间是div2宽度+边距。

<div id="container">

    <div id="top">1</div>
    <div id="right">2</div>
    <div id="bottom">3</div>

</div>

<div id="container2">

    <div id="top2">1</div>
    <div id="right2">2</div>
    <div id="bottom2">3</div>

</div>

div {display: inline-block; font-size: 50px; text-align: center; vertical-align: middle; color: white;}
div div {background: red; margin: 10px; border: 2px solid black;}
/* ------------------- LEFT ------------------------ */
#container {width: 350px; border: 2px solid green; float: left;}

#top {width: 200px; height: 100px; float: left;}
#bottom {width: 200px; height: 100px; float: left;}
#right {width: 100px; height: 300px; float: left;}
/* ------------------- RIGHT ----------------------- */
#container2 {width: 350px; border: 2px solid green; margin-left: 10px;}

#top2 {width: 200px; height: 100px; float: left;}
#bottom2 {width: 200px; height: 100px; float: left;}
#right2 {width: 100px; height: 300px; float: right;}

<div id="top">1</div>
<div id="right">2</div>
<div id="bottom">3</div>

div {display: inline-block; font-size: 50px; text-align: center; color: white; border: 2px solid black;}
div {background: red; margin: 10px;}


#top {width: 200px; height: 100px; float: left; position: relative; margin-right: 130px;}
#bottom {width: 200px; height: 100px; float: left;}
#right {width: 100px; height: 300px; position: absolute; left: 230px;}