html - 将 div 移动到 float 元素的右侧,但在另外两个元素的下方

标签 html css xhtml width

这是一个让我感到困惑的 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>

Example

文本应该在上图中白框的位置。

最佳答案

现在应该很简单了吧?只需将它 float 到左侧并给它一个宽度...

Demo

CSS

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

关于html - 将 div 移动到 float 元素的右侧,但在另外两个元素的下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14044516/

相关文章:

javascript - 在鼠标移动时隐藏/显示顶部栏并在视频暂停时显示

javascript - 选择选项的文本在选择后不同

html - 网页中的图片列表

javascript - 禁用链接直到所有动画停止并再次启用它们

css - 如何在 html 选项标签内实现两种不同的对齐方式?

html - CSS定位图片和文字

javascript - 通过 javascript 从我的网站读取特定事件(或所有响应)的 HTTP 响应文本

html - 两个独立的 div,为什么一个渲染在另一个里面?

javascript - chop 段落前 100 个字符并隐藏段落的其余内容,以通过更多/更少链接显示/隐藏其余内容

javascript - bpopup jQuery 不工作