Question

当我使用Float属性时，这是我的CSS问题我的照片：http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b

它看起来不太好，因为在块之间有很多空白区域。我的CSS代码：

.listcol{
    width:180px;
    float:left;
    margin-right:5px;
    background-color:#eceff1;
    margin-top: 1px;
    min-height:200px;
    background-image: url(../images/colbg_btm.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: 0px; 
}
.listcol ul{
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    margin-top: 0px;
    list-style-type: none;
}

请查看并查看并帮助我更正屏幕上没有任何空白区域！非常感谢！

Answer 1

无法看到图片，但也许如果你将宽度表示为页面宽度的百分比...而不是180px，也许

width: 80%;

..使用任何最适合你的百分比。

Answer 2

我认为我们需要确定你的html标记，但你需要做的是有一个结构，其中block1和block3在一个容器块中。容器可以浮动，block2可以浮动。 Block1和block3不需要浮动。

Answer 3

你可以发布一些HTML吗？或修复图像？看起来你为你的UL处理左边距，但是你的其他一些块元素可能会有一些额外的余量，因为它们往往带有内置边距。

我也同意罗伯特哈维的观点。尝试使用合理而非像素的百分比。在用户或浏览器对屏幕大小，字体大小等所做的任何更改中，它都会更加一致。

是list1,2和3中listcol div中的所有UL吗？

Answer 4

我认为你可以通过给li的行高度为“0px”来解决你的问题。

ul li { 
 float:left;
 line-height:0px;
}
ul {
 width:124px;
}


<ul>
    <li><img src="images.jpeg" /></li>
    <li><img src="images.jpeg" /></li>
</ul>

Answer 5

我试着解决你的想法，但这并不好。另外，我把我的HTML放在下面：

#content02{
    width:740px;
    float:left;
    margin-left: 10px;
}
.wrapper{
    width:760px;
    margin-left:auto;
    margin-right:auto;
}
.main02{
    width:760px;
    float:left;
    background-color:#FFFFFF;
    padding-bottom:20px;
    padding-top: 10px;
}
.listcol{
    width:180px;
    float:left;
    --position: absolute;
    margin-right:5px;
    background-color:#eceff1;
    margin-top: 1px;
    min-height:200px;
    margin-bottom: 0px; 
}
.listcol ul{
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    margin-top: 0px;
    list-style-type: none;
}
.listheader{
    display: block;
    margin-top: 0px;
    background-color: #2F404A;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 10px;
    width: 180px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-position: top;
    text-align: center; 
}

<div class="wrapper">

<div class="main02">
<div id="content02">
<div class="listcol">
<ul>

</ul>
</div>
<div class="listcol">
<ul>

</ul>
.....
.....
</div>

请注意，块的数量会动态增加并使用相同的样式“listcol”。您可以在此处查看描述此问题的图片：http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b

Answer 6

在当前的解决方案中无法避免空间，因为它是块2的高度，当它浮动到左边时，它会“向下”阻挡块3。

所以你可能需要一个完全不同的html布局来解决你的请求......

请向我们展示更多样本，了解您希望页面具有更多不同高度的li元素。

Answer 7

黄长发：

您需要在每个列周围包装div。这应该允许框在它们自己的div中从上到下流动，然后你可以浮动每个div列。给每个div一个25％的宽度。您可能还希望将整个事物包装在div中，并将其宽度设置为100％。

Answer 8

请尝试摆脱'.listcol'中的“min-height”。另外，在'.listcol'中删除“position：absolute”。

如果有效，请告诉我。

如果没有，您可以尝试将HTML修改为列，例如：

<div class="column">

    <div class="box"></div>

    <div class="box"></div>

</div>

<div class="column">

        <div class="box"></div>

        <div class="box"></div>

</div>

CSS：

.column{
    float: left;
    width: 200px;
    margin-right: 5px;
}

.box{
    margin: 0px;
}

CSS：Float属性的问题

8 个答案: