0

我对 div 浮动有疑问，

我使用了两个向左浮动的 DIV，但如果 div 2 有大文本，它会在 div 1 下加载，我该如何防止这种情况，我想要两个 div 内联加载。我使用了 inline-block 但没有工作。

http://jsfiddle.net/pS6Gg/

<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>

谢谢

4

5 回答 5

1

不知何故像这样：

<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>

但是，我不建议使用这样的布局技术，因为它可能会在以后给您带来一些麻烦，当您可能考虑将您的页面移植到移动设备或一些微型显示设备时。

问候。

于 2013-01-10T15:58:54.227 回答
1

好吧，如果内容太长以至于两个 DIV 无法显示在同一行上，您希望发生什么？您要么必须使用第二行，要么截断显示的内容。

由于在第二行已经发生了，<span>如果更可取，请考虑使用内联元素来实现第二个效果。例子。

于 2013-01-10T16:03:04.317 回答
1

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

于 2013-01-10T15:57:41.390 回答
0

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

第一种可能性让第二个 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%;">
于 2013-01-10T16:09:39.793 回答
0 
    <div style="width:800px;">
    <div style="float: left;">Left Stuff</div>
    <div style="padding-left:80px;">....</div>

尝试通过 padding-left by 80px ...它在.your Fiddle 中的工作..尝试一下

于 2013-01-10T16:34:28.747 回答