向右浮动而不定义宽度

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 class只会向右移动，否则它会向下移动。如何在不定义.fright的宽度的情况下实现此目的？

demo

Answer 1

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

每当你float任何元素时，它都会表现为inline-block级别元素，因此，它会在另一侧未使用时创建一个阴沟/空白空间。这将导致下面的元素呈现除浮动元素之外移位，除非并且直到元素为inline-block，inline或floated。在这里，你有div希望float: right;，它是浮动的，但默认情况下它是一个块级元素，block级别元素的行为就像{{1}但是，元素，这里有一个问题，它会占用整个水平空间，因此它会移动到浮动元素下方（尽管元素本身为inline-block到floated ）。

现在简单的解决方案是不要将right分配给元素，它只是将文本包装在浮动元素周围，这里的坏点是什么？我会以图片的方式向您展示..

Demo（这很脏）

所以你不希望你的元素将文本包装在图像下面，所以解决方法是为内容块提供float: right;属性，而不是你会得到这样的东西..

Demo

margin-left

---

  

结论：使用.fright{ margin-left: 120px; } 并不坏，我仍然建议您使用   而是margin财产。

Answer 2

我希望你正在寻找类似的东西。

<强> WORKING DEMO

CSS更改：

.fright {
    display: inline;
}

希望这有帮助。

Answer 3

将overflow: hidden;添加到.fright可以解决问题。

查看我的小提琴：http://jsfiddle.net/KGg6H/7/

Answer 4

许多解决方法和解决方法可以决定其他地方使用的其他代码和样式。这就是我在你的演示中使用的

.fright{
    right: 0;
    display: inline;
}