Question

我需要将这些浮动div中的文本放在一行中。在Firefox中，这可行。在IE6中它看起来搞砸了：

我无法在这些上设置明确的宽度。设置高度没有帮助。有什么想法吗？

HTML：

<div id="wraper">

<div class="draggable">
    <p>a main road with fast-travelling traffic</p>
</div>

<div class="draggable">
    <p>a very large bird, not able to fly</p>
</div>

<div class="draggable">
    <p>very important</p>
</div>

<div class="draggable">
    <p>a plant with white berries that feeds on trees</p>
</div>

<div class="draggable">
    <p>breakfast and lunch combined in one meal</p>
</div>

<div class="draggable">
    <p>a part of a room used for cooking</p>
</div>

和CSS：

#wraper{
background: #FAFAFA;
border: 1px solid #333;
margin: 0 auto;
overflow: hidden;
padding: 20px;
width: 500px;
}
.draggable{
background: #F1F7FF;
border: 1px solid #CAE1FF;
display: inline;
float: left;
margin: 0 5px 5px 0;
padding: 3px;
position: relative;
width: auto;
height: auto;
}
.draggable p{
margin: 0;
padding: 0;
}

Answer 1

.draggable p {
    white-space: nowrap;
}

您不应该需要明确的auto宽度/高度，这是默认值。您通常不会使用display: inline，因为浮点数永远不会内联，但我想这是IE错误的解决方法？

Answer 2

尝试将white-space:nowrap;添加到.draggable课程。
如果失败，并且您希望在某个时间点换行，请将clear:left;添加到每行.draggable的第一个实例。

BTW你可以使用继承，丢失.draggable类和div（BTW wraper = wrapper？）并设置p标记的样式：< / p>

#wrapper p { rules here }

width：自动浮动divs问题（IE6）

2 个答案: