CSS块左浮动

我有这个html文件

    <div class="con" style="width:100px;height:200px;">
        1
    </div>
    <div class="con" style="width:100px;height:200px;">
        2
    </div>
    <div class="con" style="width:100px;height:400px;">
        3
    </div>
    <div class="con" style="width:100px;height:400px;">
        4
    </div>
    <div class="con" style="width:100px;height:100px;">
        5
    </div>
    <div class="con" style="width:100px;height:100px;">
        6
    </div>
    <div class="con" style="width:100px;height:100px;">
        7
    </div>
    <div class="con" style="width:100px;height:100px;">
        8
    </div>

1.
2.
3.
4.
5.
6.
7.
8.

我想用这个html得到这样的结果：

但是我写了这个css：

<style>
body {
width:440px;
height:440px;
}
.con{
float:left;
background:#bebebe;
margin:1px;
}
</style>

身体{
宽度：440px；
高度：440px；
}
.con{
浮动：左；
背景：贝贝；
保证金：1px；
}

我得到了这个结果-(

---

我重复一遍，我将只使用我编写的html代码生成第一个图像的结果。

首先，您不应该有多个具有相同

id

的项。这就是

class

的目的。

id

在页面中应该是唯一的

您的问题的解决方案是将两个高块浮动到

右侧

，将所有其他块浮动到

左侧

当然，如果箱子放在一个容器（即车身）中，这对所有四个都是正确的宽度，否则你只会在布局的中间出现一个空隙。 问题是，因为所有的ID都是相同的，所以无法轻松指定哪些ID向右浮动，哪些ID向左浮动

有很多方法可以做到这一点，但正确的解决方案是使用类

<div class="con" style="width:100px;height:200px;">
    1
</div>
<div class="con" style="width:100px;height:200px;">
    2
</div>
<div class="con tall" style="width:100px;height:400px;">
    3
</div>
<div class="con tall" style="width:100px;height:400px;">
    4
</div>
<div class="con" style="width:100px;height:100px;">
    5
</div>
<div class="con" style="width:100px;height:100px;">
    6
</div>
<div class="con" style="width:100px;height:100px;">
    7
</div>
<div class="con" style="width:100px;height:100px;">
    8
</div>


<style>
body {
  width:408px;
  height:440px;
}
.con {
  float:left;
  background:#bebebe;
  margin:1px;
}
.tall {
  float:right;
}

</style>

这只会影响具有

id=“con”

且

style

属性包含

height:400px；

的元素

但是请注意，

[attr]

选择器在旧版本的IE上不起作用，因此如果您决定使用它，可能需要格外小心

---

此解决方案还涉及将某些元素向右浮动，这似乎是您坚决反对的，但它仍然是唯一可行的CSS唯一解决方案。

首先，您不应该有多个具有相同

id

的项。这就是

class

的目的。

id

在页面中应该是唯一的

您的问题的解决方案是将两个高块浮动到

右侧

，将所有其他块浮动到

左侧

当然，如果箱子放在一个容器（即车身）中，这对所有四个都是正确的宽度，否则你只会在布局的中间出现一个空隙。 问题是，因为所有的ID都是相同的，所以无法轻松指定哪些ID向右浮动，哪些ID向左浮动

有很多方法可以做到这一点，但正确的解决方案是使用类

<div class="con" style="width:100px;height:200px;">
    1
</div>
<div class="con" style="width:100px;height:200px;">
    2
</div>
<div class="con tall" style="width:100px;height:400px;">
    3
</div>
<div class="con tall" style="width:100px;height:400px;">
    4
</div>
<div class="con" style="width:100px;height:100px;">
    5
</div>
<div class="con" style="width:100px;height:100px;">
    6
</div>
<div class="con" style="width:100px;height:100px;">
    7
</div>
<div class="con" style="width:100px;height:100px;">
    8
</div>


<style>
body {
  width:408px;
  height:440px;
}
.con {
  float:left;
  background:#bebebe;
  margin:1px;
}
.tall {
  float:right;
}

</style>

这只会影响具有

id=“con”

且

style

属性包含

height:400px；

的元素

但是请注意，

[attr]

选择器在旧版本的IE上不起作用，因此如果您决定使用它，可能需要格外小心

---

此解决方案还涉及将某些元素向右浮动，您似乎坚决反对，但它仍然是唯一可行的CSS唯一解决方案。

将

主体的
宽度
更改为
408px；
然后
浮动：右；
div 3和4

演示：

仅使用左侧浮动更新演示：
将
主体的
宽度
更改为
408px；
然后
浮动：右侧；
第3和第4部分

演示：

更新了只剩下float的演示：
您的基本问题是CSS
float
的工作方式与您希望它的工作方式不同

问题的另一个答案可能是使用Javascript来破解它

有一个名为jQuery的插件，它看起来像是在做你想要做的事情。你可以对所有事情使用
float:left；
，然后使用砌体来填补空白

这意味着依赖一个不完全基于CSS的解决方案，这可能并不理想——特别是因为我已经给了你一个只使用CSS的解决方案

（同样，一旦你开始使用Javascript，你肯定需要解决你的
id
vs
class
问题——如果所有这些元素都具有相同的
id
，Javascript将与你断绝关系）
你的基本问题是CSS
float
的工作方式与你希望它的工作方式不同

问题的另一个答案可能是使用Javascript来破解它

有一个名为jQuery的插件，它看起来像是在做你想要做的事情。你可以对所有事情使用
float:left；
，然后使用砌体来填补空白

这意味着依赖一个不完全基于CSS的解决方案，这可能并不理想——特别是因为我已经给了你一个只使用CSS的解决方案

（同样，一旦你开始使用Javascript，你肯定需要解决你的
id
vs
class
问题——如果你的所有元素都具有相同的
id
，Javascript将与你断绝关系）
好，如果我只想使用一个“float:left”有一个诀窍可以让它正确吗？@zizzamia-我已经用更多的细节更新了答案，并包含了工作代码。@zizzamia-我添加了另一种可能的CSS方法，它根本不涉及更改HTML。它仍然需要你
float:right
这个高块。好吧，如果我只想使用一个“浮动：左"有一个诀窍可以让它正确吗？@zizzamia-我已经更新了答案的更多细节并包含了工作代码。@zizzamia-我添加了另一种可能的CSS方法，它根本不涉及更改HTML。它仍然需要你
float:right
这个高块。你使用的CSS规则是错误的。Id应该是正确的对于一个div来说是独一无二的，如果你想让不同的div元素具有相同的样式，你应该使用一个类。我知道，但现在这并不重要！！！哈哈哈，你是对的，但现在我希望能够只用左浮点来解决这个问题。为什么我写