这是一个CSS问题,使我无所适从。下面是我当前拥有的代码,我希望描述文本在蓝色框的右侧(即标题下方),但要使其继续位于``按钮''下方。我尝试了各种组合,但是它们要么从当前位置开始,要么在标题下方,但以其宽度缩进。

任何帮助,不胜感激

<html>
    <head>
        <style>
            body { background-color: #fff; color: white; }
            .outer { width: 850px; height: 400px; background-color: #000; }
            .logo {float: left; width:150px;height:150px;background-color: #00f;}
            .button {float: right; height: 60px; width: 80px; background-color: #f00; }
            .title { font-size: 60px; float:left;}
            .desc {clear:both;}
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="head">
                <div class="logo">oo</div>
                <div>
                    <div class="title">Title</div>
                    <div class="button">button</div>
                    <div class="desc">description text description text description text description text description text description text description text description text description text description text description text description text</div>
                </div>
            </div>
        </div>
    </body>
</html>




文本应位于上图中白色框的位置。

最佳答案

现在应该很简单吧?只需将其浮动到左侧并为其设置宽度即可...

Demo

的CSS

.desc {
    float: left;
    width: 650px;
    padding: 10px;
}

10-02 19:39