0

我有一个div和一个ul我正在尝试浮动以创建两列。中的项目ul也是浮动的，因此它们会在垂直包装之前水平扩展：

http://jsfiddle.net/3dhHe/7/

<style type="text/css">
    ul {list-style-type: none;}
    li {float:left; width:275px; min-height: 50px; padding: 12px; border-radius: 4px; border: 2px outset #eee;}
    .float-right {width: 300px; float: right; margin-left: 25px;}
    .float-left {float: left;}
</style>

<div class="float-right">
    This content should float to the right
</div>
<ul class="float-left">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
    <li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li>
</ul>

如果我从列表项中删除浮点数，那么一切都会按预期工作，但是，当li元素应用了浮点数时，ul元素似乎“丢失”了它的浮点数。

有没有办法强制 ul 浮动到 div 的左侧，同时允许 ul 的内容浮动？注意：我需要 ul 的宽度是动态的，所以我不能为其设置显式宽度。

谢谢！！！

更新

我正在尝试实现这样的目标： 浮动 2 列

右边的文本可以有一个静态的宽度，但ul包含的框不应该有一个明确的宽度（这样如果浏览器的宽度增加，那么“测试 3”框将移动到第一行）。

我遇到的问题是，如果我没有在 上设置宽度ul，那么文本内容将移到ul:

有没有办法定位第div一个，然后限制ul只使用剩余空间？

4

1 回答 1

1

为了实现你的目标：

1 . 必须在 1 行上水平浮动li。ul

当实现这一点时：

2 . 必须在ul旁边找到足够的空间div才能漂浮在它旁边。

您必须给ula max-width，以强制它不要扩展并尽可能多地占用空间，确保它足够，以便它的所有孩子li都漂浮在彼此旁边。

如果这max-width还不够，那么li意志就没有力量说不！，并且它们只会在彼此下方换行。

看看：http: //jsfiddle.net/AliBassam/3EmdM/

为什么会这样？

当您告诉他们li时float:left;，就好像您在告诉他们：尽力向左漂浮，尽可能地向左漂浮，哭泣并向您的妈妈（ul）抱怨并告诉她您必须漂浮剩下！我们所有人都在同一条线上！.

当ul注意到不是所有的孩子li都漂浮在同一条线上时，它会在下方换一条新线，div这样它就可以实现这一点。

这是另一个示例，请注意，当 2li彼此浮动时(1)，并且当有足够的空间让整体ul在div(2)旁边时，它会浮动在它旁边。

这是另一个带有 2的示例divs，结果相同，第二个div不会浮动，直到它的所有子div元素都漂浮在其中(1)并且在另一个div(2)旁边找到了足够的空间。

更新

您需要的是同时拥有父 Divdiv和ul内部，这将有一个and ，给它一个最小宽度将允许它在您最大化浏览器时扩展，它会允许它变得更小但仅限于限制.divposition:relatve;min-width

然后给孩子divstatic width，比方说，250px，并给ula或多一点（将其视为 a position:absolute;）。right:250pxmargin-right

<div style="position:relative; min-width:600px;">
<ul style="position:absolute; right:250px; left:0px; ">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
</ul>
<div style="float:right; width:250px;">
    This content should float to the right
    <br />
    This content should float to the right
    <br />
    This content should float to the right
    <br />
    This content should float to the right
</div>
</div>

看看：http: //jsfiddle.net/AliBassam/FFrev/

于 2013-01-31T23:59:25.497 回答