Question

我正在尝试创建一个小网格布局。但是，当使用浮动时，文本实际上比浮动的div大，并且环绕它。

有没有办法可以阻止文本环绕div，但我仍然需要将div放在彼此旁边。

CSS：

.left-note-feed {
    width: 50%;
    background-color: orange;
    overflow: auto;
}
.note-container {
    margin: 15px;
}
.note-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #000
}
.note-content {
    float: left;
    margin-left: 10px;
}

HTML：

<div class="left-note-feed">
    <p>Show Notes Feed</p>
    <div class="note-container">
        <div class="note-avatar"></div>
        <div class="note-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, molestias nulla consequatur laborum harum obcaecati sunt voluptates. Soluta, accusantium, facere saepe minus quaerat libero nisi error magnam quidem enim eius!</p>
        </div>
    </div>
    <div class="note-container">
        <div class="note-avatar"></div>
        <div class="note-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, molestias nulla consequatur laborum harum obcaecati sunt voluptates. Soluta, accusantium, facere saepe minus quaerat libero nisi error magnam quidem enim eius!</p>
        </div>
    </div>
</div>

Answer 1

根据您的问题，您似乎想要将头像放在内容旁边，而不是将内容包装在头像下面。

由于您知道化身的大小，请将内容浮动，并将其边距设置为化身的大小。

JS Fiddle

.note-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    float: left;
    background-color: #000;
}

.note-content {
    margin-left: 60px;
}

如果您偶然想要将内容包裹在头像下面，那么您可以将头像向左移动，并将内容display设置为inline：

JS Fiddle

.note-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    float: left;
    background-color: #000;
    margin-bottom: 10px;
    margin-right: 10px;
}

.note-content {
    display: inline;
}

Answer 2

指定.note-content

的宽度

.note-content {
    float: left;
    margin-left: 10px;
    width: 285px;
}

从p标记中删除填充后，它看起来更好：

.note-content p{
    margin-top: 0px;
}

另一方面，p标签是不必要的。

JS小提琴： http://jsfiddle.net/4P35M/8/

停止文本环绕浮动div

2 个答案: