基本的HTML和CSS Float问题

在下面的例子中也发现：http://jsfiddle.net/vqBLX/1/有没有办法让块“六”浮动到右列的顶部而不改变其在HTML中的位置？基本的HTML和CSS Float问题

代码示例：

#container{width:200px; backgroung:#ccc;} 
.box{width:110px; height:100px; background-color:red;} 
.one, .two, .three, .four, .five{float:left} 
.six{float:right; background-color:blue; width:90px;}

<div id="container"> 
    <div class="box one"> </div> 
    <div class="box two"> </div> 
    <div class="box three"> </div> 
    <div class="box four"> </div> 
    <div class="box five"> </div> 
    <div class="box six"> </div> 
</div>

来源

2012-03-01 Front_End_Dev

如果不使用绝对或相对定位。你可以把它放在第二位，然后将它浮起来。或者先把它放在右边

要确定它的位置，请将#container设置为position: relative。将方框六设置为position: absolute; top: 0; right: 0

或者使用其他人建议的保证金理念。

来源

2012-03-01 02:15:33

你的第一句话是对的，但OP不希望改变HTML元素的位置。 – 2012-03-01 02:17:52

是的，这就是为什么我展示了如何处理绝对定位 – 2012-03-01 02:18:36

是的，我想我可能不得不使用绝对定位。在我的网站建设中，没有任何其他的东西可以让我完全摆脱“六”的位置。我越来越疲倦，想要确保我不会忽视明显的事情。 – 2012-03-01 02:32:08

没有最佳答案，但它的工作原理：

.six{float:right; background-color:blue; width:90px; margin-top: -400px;}

来源

2012-03-01 02:15:27 Raptor

@peter会工作，但它似乎不正确。如果左列中的任何一个框改变了垂直高度，它也会中断。没有其他方法吗？有 – 2012-03-01 02:19:04

有。您可以将红色框与DIV分组。然后，您可以管理蓝色框的位置。 – Raptor 2012-03-01 02:20:54

嗯，我想我的简单问题来回答一个复杂的问题是行不通的。我正在尝试构建一个响应式布局，其中某些列的所有列都垂直对齐，而其他列则相邻。我想我知道我现在需要做什么。 – 2012-03-01 02:29:47

您可以添加：

position: relative; top: -400px;

在CSS你.six类。

来源

2012-03-01 02:16:01

.six{position: relative; left:110px; top:0px; background-color:blue; width:90px;}

http://jsfiddle.net/vqBLX/9/

不知道这是你在找什么。

来源

2012-03-01 02:17:44 Chloe

这就是我正在寻找的东西，但由于某种原因，在我的实际网站中，它正在将我的侧边栏向右移动。 – 2012-03-01 02:53:02

即使您接受我的回答，如果您确实想要使用相对位置，您基本上需要做的就是查看没有位置的位置，然后测量您需要使用多少像素才能将其放到所需位置（ up = -top，down = top，left = -left，right = left）。但是Relative不会将其从文档流中提取出来，因此它会留下应该存在的空间。 – 2012-03-01 03:08:55

基本的HTML和CSS Float问题

回答

相关问题