Question

我有div浮动的问题，

我已经使用了两个向左浮动的DIV，但是如果div 2有大文本，它在div下加载，我怎么能阻止这个，我想要两个div加载内联。我使用了内联块但没有工作。

<div style="width: 100%;overflow:hidden;">
 <div style="float: left;width:">Left Stuff</div>
 <div style="float: left;margin-left:10px;">    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 <br style="clear: left;" />
</div>

感谢

Answer 1

您需要为<div>元素设置宽度参数。

Answer 2

不知怎的这样：

<div style="width: 100%; overflow:hidden;">
 <div style="float: left;width:20%">Left Stuff</div>
 <div style="float: left;width:80%">Right Stuff</div>
</div>

但是，我不建议使用这种布局技术，因为它可能会在您考虑将您的页面移植到移动设备或一些微小的显示设备后，会导致您遇到麻烦。

问候。

Answer 3

嗯，如果内容太长，两个DIV无法在同一行显示，那么你想发生什么？您将不得不使用第二行或截断显示的内容。

由于第二行是已经发生的事情，考虑使用内联元素（例如<span>）来实现第二个效果（如果这是更可取的）。 Example

Answer 4

http://jsfiddle.net/pS6Gg/4/或http://jsfiddle.net/pS6Gg/5/会这样做吗？

第一种可能性让第二个div围绕第一个div流动，

<div style="float: left; width: 50px;">Left Stuff</div>
<div style="margin-left:10px;">... text ...</div>

，第二个通过定义第一个div的宽度来创建一个列效果，并为父div提供一个已定义的高度，供孩子们填充。

<div style="width: 100%;overflow:hidden; height:200px;">              <-- parent height 
<div style="float: left; width: 50px; height:100%;">Left Stuff</div>
<div style="margin-left:10px; height:100%;">

Answer 5

    <div style="width:800px;">
    <div style="float: left;">Left Stuff</div>
    <div style="padding-left:80px;">....</div>

尝试填充左侧80px ...它的工作在你的小提琴..试试吧

如何对齐浮动div

5 个答案: