2

我有以下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？

演示

4

4 回答 4

2

我想详细介绍一下这个，为什么会发生，你不应该多余地添加width到你的元素中。

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

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

演示（这很脏是的）

在此处输入图像描述

所以你不希望你的元素将文本包装在图像下方，所以解决方法是为margin-left内容块提供一个属性，然后你会得到这样的东西..

演示

.fright{
    margin-left: 120px;
}

在此处输入图像描述

结论：使用margin也不错，我还是建议你改用 width属性。

于 2013-10-21T09:56:15.707 回答
1

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

工作演示

CSS 变化：

.fright {
    display: inline;
}

希望这可以帮助。

于 2013-10-21T09:44:11.493 回答
1

添加overflow: hidden;到 .fright 就可以了。

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

于 2013-10-21T09:45:10.227 回答
0

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

.fright{
    right: 0;
    display: inline;
}
于 2013-10-21T09:48:48.537 回答