html - 向右浮动而不定义宽度

Question

我有以下 html

<h2>OUR CHAIRMAN</h2>
<div class="profile">
<div class="fleft"><img class="mgmt fleft" src="images/kishan.jpg" border="0" alt="" /></div>
<div class="fright">
<h5>KISHAN LAL DUGAR</h5>
Mr Kishan Lal Dugar, an experienced entrepreneur and visionary, is the founder of the KL Dugar Group. He has steered the Group to the success it enjoys today. His vision led to the diversification and conglomeration of the Group. His meticulous efforts and foresight lead the Group to reach a turnover of over NRs 6,000 million and build up a workforce of over 800 employees.</div>
</div>

CSS

.fleft{
    float: left;

}
.fright{
    float: right;
}

对于fright类，如果我定义了宽度，那么只有它会向右移动，否则它会向下移动。在不定义 .fright 宽度的情况下如何实现此目的？

demo

Answer 1

我想详细介绍一下这个问题，为什么会发生这种情况，并且您不应该在元素中添加 width 。

每当您 float 任何元素时，它都会表现得好像它是一个内联 block 级别元素，因此，它将在另一个元素上创建一个装订线/空白空间侧面未使用。这将导致下面的元素渲染移动到 float 元素之外，除非且直到该元素是 inline-block、inline 或 floated。在这里，你有一个 div 想要 float: right;，好吧，它是 float 的，但默认情况下它是一个 block 级元素，一个 block level 元素的行为类似于 inline-block 元素，不过，这里有一个问题，它将占用 ENTIRE 水平空间，因此它会移动到 float 元素下方(尽管元素本身 float 到右侧)。

现在简单的解决方案是根本不将 float: right; 分配给元素，它只会将文本包裹在 float 元素周围，这里有什么不好的地方？我会用图解的方式告诉你..

Demo (这很脏耶)

因此，您不希望元素将文本包裹在图像下方，因此解决方法是为内容 block 提供 margin-left 属性，然后您将得到类似的内容。 .

Demo

.fright{
    margin-left: 120px;
}

---

Conclusion: Using margin is no bad, I would still suggest you to use width property instead.