Question

出于某种原因，如果我使用line-height属性并将其设置得稍微小一些，比如13px左右，主要文本总是在它的第一行的底部div上。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
            div.main{
                background-color:grey;
                width:500px;
                height:100px;
                text-align:justify;
                line-height:13px;   /* pfff */
            }
            div.pusher{
                float:right;
                height:40px;
            }
            div.bottom{
                float:right;
                clear:right;
                height:60px;
                width:100px;
                background-color:green;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="pusher"></div>
            <div class="bottom">
                    textaaaaa aaaa aaaa
            </div>
            We have yet, many other health products, as they are all beneficiary in some way, aroma therapy products can help you to get more relaxed,
                        relieve the stress and pain, they can help with a better sleep and even protect from mosquitos.
                        Our beverages are also completely natural, and will keep you fresh and in shape!
                        Everyone knows of the coffee benefits, the juices also have vitamins and are highly beneficial.
                        In the beverage section you can also find.
        </div>
    </body>
</html>

有什么想法吗？

enter image description here

Answer 1

您是否尝试围绕绿色div创建文本换行效果？

你应该将主文本浮动并将它们并排放置，看起来会更好，然后在它们下面添加一个清晰的潜水。

同时检查http://css-tricks.com/all-about-floats/

编辑：

好的，你松开推动器并将绿色div移到主体外面并将其向右漂浮并使用负边距将其放入到位。并在主要下添加一个明确的潜水。

或将主div设置为相对位置并使用绝对定位移动绿色div

Answer 2

我设法找到了这个错误的答案。

推杆的高度需要是线高的倍数。例如。 39px;

在这种情况下，它会按预期浮动文本。然后我们可以使bg变得透明，并使用一个litle填充来使它更好地排列。

Google Chrome：一个荒谬的浮动bug？

2 个答案: