浮动布局//如何将第三个 div 正确放置在第一个下答案

【问题标题】：Float layout // how to position properly third div under first浮动布局//如何将第三个 div 正确放置在第一个下
【发布时间】：2014-03-31 16:46:00
【问题描述】：

关于浮动有很多问题要找到我的确切问题，对不起，如果我发布了一个副本......

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

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

目标：我想让左边的看起来和右边的一模一样，只是不使用：float:right;因为我不想要固定的页面宽度。我希望它更清楚。

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

jsfiddle

编辑：

设法破解它：http://jsfiddle.net/WEL6p/

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

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

CSS：

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 #1 和 div #3 是否总是相同的宽度？
看起来您已经在第二个容器中完成了您想要的操作？？
是的，它们都是像素宽度，就像示例一样，只是没有容器元素。
是的 Danield，但我不希望页面中有容器元素：如果屏幕足够大，我希望 div #3 位于 div #2 的右侧。第二个容器只是为了展示我想要的样子。
我想我找到了有效的技巧，还不能回答我的问题，因为新帐户必须等待 8 小时 :) 感谢@KingKing 的想法。 div #1 是相对的，向左浮动。 div #2 是绝对的，并且位于 left: 属性的右侧。 div # 向左浮动。然后只需将 margin-right 添加到 div#1 与 div#2 宽度 + 边距之间。 jsfiddle.net/WEL6p/1

标签： html css css-float css-position

【解决方案1】：

我想我找到了有效的技巧：

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

然后只需将 {margin-right: } 添加到 div#1，其中 div#2 宽度 + 边距。

http://jsfiddle.net/WEL6p/1/

感谢那些暗示我正确方向的人:)
非常喜欢

HTML：

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

CSS：

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

【讨论】：