CSS Block float left [英] CSS Block float left

问题描述

我有这个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>

我希望这个html有这个结果：

And I want with this html have this result :

但我写这个css：

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

我得到了这个结果！ :-(

And I got this result! :-(

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

I repeat that I would have the result of the first image using only the html code that I wrote.

推荐答案

您不应该有多个具有相同 id 的项目，这是 class 的用途。 id

Firstly, you shouldn't have multiple items with the same id. This is what class is for. id should be unique within the page.

解决方案是你的问题是将两个高块浮动到 right ，并将其他所有内容移到左。

The solution is to your problem is to float the two tall blocks to the right and everything else to the left.

如果箱子是在一个容器（即主体），这是正确的宽度为所有四个，否则你的布局中间最终会有一个缺口。

This will of course only work if the boxes are in a container (ie the body) that is just the right width for all four, otherwise you'll just end up with a gap in the middle of your layout.

麻烦的是，因为你有一样的ID，所以你不能轻易地指定哪些浮动右，哪些浮动左边。

The trouble is that because you've got the same ID for everything, you can't easily specify which ones to float right and which ones to float left.

有办法，但正确的解决方案是使用类。

There are ways to do it, but the correct solution would be to use classes.

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

如果您绝对不能（或不会）更改HTML代码，还有另一个解决方案，我可以建议 - CSS [attr] 选择器将允许您为具有特定属性的元素指定不同的CSS样式。

If you absolutely cannot (or will not) change the HTML code, there is still one other solution I could suggest - the CSS [attr] selector will allow you to specify a different CSS style for elements that have particular attributes. In this case, you could use it to pick out the tall blocks and float them right.

#con[style~='height:400px;'] {float:right;}

code> id =con，其中 style 属性包括 height：400px; 。

This will only affect the elements that have id="con" and where the style attribute includes height:400px;.

但请注意， [attr] 选择器不适用于旧版本的IE，所以你可能需要谨慎，如果你决定使用它。

However please note that the [attr] selector does not work on older version of IE, so you may need to excersise caution if you decide to use it.

这个解决方案还涉及到浮动某些元素在右边，你似乎是死设置，但它仍然是唯一可行的纯CSS解决方案。

This solution also involves floating certain elements to the right, which you seem to be dead set against, but it is still the only viable CSS-only solution.

这篇关于CSS Block float left的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！