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 任何元素，它都会表现得好像它是一个inline-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.