3

出于某种原因，如果我使用 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>

有任何想法吗？

在此处输入图像描述

4

2 回答 2

0

您是否尝试在绿色 div 周围创建文本环绕效果？

您应该将正文向左浮动并将它们并排放置，这样看起来会更好，然后在它们下方添加一个清晰的两个潜水。

也检查一下http://css-tricks.com/all-about-floats/

编辑：

好的，您松开推动器并将绿色 div 移到 main 之外并将其浮动并使用负边距将其放置到位。并在 main 下添加一个明确的两者潜水。

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

于 2012-05-15T07:42:20.553 回答
0

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

推杆的高度需要是线高的倍数。例如。39像素；

在这种情况下，它将按预期浮动文本。然后我们可以使背景透明并放置一点填充以使其更好地排列。

于 2012-05-15T08:08:53.370 回答