Question

关于浮动找到我确切的问题有很多问题，抱歉，如果我发布了一份副本......

如果浏览器宽度不足以支持它在div＃2右侧，我希望div＃3直接在div＃1下。将它全部浮动到左侧是我找到的最佳选择。

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

目标：我希望左边的一个看起来完全正确，只是不使用：float：right;因为我不想要固定的页面宽度。我希望它能说得更清楚。

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

jsfiddle

修改的

通过以下方式管理它：http://jsfiddle.net/WEL6p/

一个是＃1的绝对位置，它是相对的。然后添加浮动到左边的fixer和visibility：none;宽度与＃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;}

Answer 1

我想我找到了工作黑客：

div＃1是相对的，向左浮动。
div＃2是绝对的，并且以{left：}属性定位到右边 div＃3向左浮动。

然后只需将{margin-right：}添加到div＃1，其中div为＃2 width + margin。

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

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

1 个答案: