浮动其子元素也浮动的元素

Question

我有一个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元素似乎“丢失”它的浮点数。 / p>

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

感谢!!!

---

更新

我正在努力实现这样的目标：

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

我遇到的问题是，如果我没有在ul上设置宽度，则文本内容会移到ul之上：

有没有办法首先定位div，然后限制ul仅使用剩余的空间？

Answer 1

实现目标：

<强> 1 即可。 li内的所有ul必须水平浮动在一行上。

实现这一目标时：

<强> 2 即可。 ul必须在div旁边找到足够的空间，以便在其旁边浮动。

你必须给ul一个max-width，强制它不要扩展并尽可能多地占用空间，确保它足以让它的所有子li都是漂浮在一起。

如果max-width不够，那么li将没有力量说 NO！，他们只会将新的线条放在彼此之下。< / p>

检查出来：http://jsfiddle.net/AliBassam/3EmdM/

为什么会这样？

当你告诉li float:left;时，就好像你在告诉他们一样：尽量向左浮动，抓住每个空间，这样你就可以左转，哭泣并抱怨你的妈妈（ul）并告诉她你必须向左漂浮！我们所有人都在同一条线上！。

当ul注意到并非所有子级li都在同一行上浮动时，它会在div下方换一个新行，这样就可以实现这一点。

这是another example，请注意当2 li已经相互浮动时（1），并且当整个ul有足够的空间时在div （2）旁边，它会浮在它旁边。

以下为another example，其中divs为div，结果相同，第二个div将不会浮动，直到其所有子div都浮在其中（1） ，并且在其他div （2）旁边找到了足够的空间。

<强>更新

您需要的是在{strong> Parent Div 中同时拥有ul和div，此position:relatve;将包含min-width和div，给它一个最小宽度将允许它在你最大化浏览器时扩展，并且它将允许它变小但只有一个限制。

然后向孩子width提供静态250px，比方说ul，并position:absolute; right:250px margin-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> 或{{1}}多一点（将其视为{{1}}）。

{{1}}

检查出来：http://jsfiddle.net/AliBassam/FFrev/