Question

我有以下情况，我希望右边的列表只使用剩余的空间，直到它通过左边的内容，此时它可以再占用整个宽度。

我可以通过为前几个margin-left: 50%硬编码<li>来完成它，但这是不够的，因为我不知道文本包装div的尺寸。

.intro {
    width: 50%;
    float: left;
}

li {
    display: block;
    height: 50px;
    border: 1px solid black;
}

<div class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Answer 1

添加：

.list {
    width:50%;
    float:right;
}

演示：

.intro {
    width: 50%;
    float: left;
}

.list {
  width:50%;
  float:right;
}

li {
    display: block;
    height: 50px;
    border: 1px solid black;
}

<div class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Answer 2

我假设您希望列表项的内容位于浮动内容的旁边。您可以使用常规div来完成此操作。不确定您使用ul和li代码的原因。

FAUX解决方案：

小提琴：http://jsfiddle.net/jebgerp8/。

HTML：

<div class="intro">
    Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping
    </div>
<div class = "li">
    <img src = "http://placehold.it/50x50" />
</div>
<div class = "li">
    <img src = "http://placehold.it/50x50/ff0000" />
</div>
<div class = "li">Another "list item"</div>
<div class = "li">Fourth "list item"</div>
<div class = "li">Last "list item"</div>

CSS：

.intro {
    width: 50%;
    float: left;
    border: 2px dashed #bbb;
}

.li {
    height: 50px;
    margin: 2px 0;
}

.li:nth-last-of-type(-n + 3) {
    border: 1px solid #000;
}

通过Flexbox提供TRUE可调节解决方案（需要现代浏览器）。

小提琴：http://jsfiddle.net/148y1b18/

CSS：

.intro {
    width: 50%;
    float: left;
    border: 2px dashed #bbb;
}

.li {
    height: 50px;
    display: flex;
    border: 1px solid #000;
}

.li + .li {
    margin-top: 2px;
}

Answer 3

我不确定你用黑色边框做了什么，但如果我有更多的信息，我可能会更多地帮助它。

您对该列表的部分问题是您遗漏了您的问题。在李的面前。看看你上面的css。它没有采用您指定的元素。

看看这个小提琴。我认为这正是你所寻找的，可能是边界不足。

http://jsfiddle.net/j9pekyje/

<p class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</p>

        <ul>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
            <li>hi i like pancakes</li>
        </ul>

.intro {
    width: 50%;
    float: left;
}
.list {
    width:50%;
    float:right;
}
.li {
    display: block;
    height: 50px;
    border: 1px solid black;
}

这也是一个问题。您可能会遇到一些问题，总共为100％，有或没有设置边距或填充，因为这通常是附加的。将来要注意的事情。希望这会对你有所帮助。

向右浮动一个块然后在浮动后占据整个宽度

3 个答案: