Question

我有这个布局：

<ul style="white-space:nowrap;">
    <li style="width:200px; display:inline-block;"></li>
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>

我设法阻止ul包装，这是一个开始。但是，第二个li中的内容会在屏幕上继续显示。重叠其父元素等。

与第一个li不同，我需要第二个li来消除松弛并且宽度是动态的。我需要将文本包含在第二个li内。

Answer 1

li {display:table;}

是你的朋友。另外，不要忘记删除内联样式！

Answer 2

在white-space: normal元素上尝试li。

white-space默认继承，因此他们从nowrap收到了ul。

我开始认为您使用ul进行布局，div可能更适合：

<div class="Item">
 <div class="ImageContainer"><img src="" alt="/></div>
 <div class="TextContainer">Text text text text text</div>
</div>

.Item {
 width: 200px;
 overflow: auto;
}

.ImageContainer {
 float: left;
 width: 40%;
}

.TextContainer {
 float: left;
 width: 60%;
}

Answer 3

听起来你可能真的想要使用表格。

否则，如果您知道图像的宽度，请向左浮动并为下一个元素提供一个大于或等于图像宽度的左边距。

例如：

article > img {
  float: left;
  height: 80px;
  width: 80px;
}
article > div {
  margin-left: 90px;
}

<article>
  <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
  <div>
    <h4>Matt Di Pasquale</h3>
    <p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p>
  </div>
</article>

Answer 4

这是CSS Grid Layout的实际用例：

ul {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 10px;
}
li {
  display: unset; /* reset user agent list-style */
}
img {
  background: #00bcd4; /* style image background */
}

<ul>
<li><img width="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20/%3E%0A">
<li>long text content next to the image long text content next to the image long text content next to the image long text content next to the image
</ul>

创建两列网格，列间距为10px。第一个网格项目的宽度为200px，以匹配您的图像和第二个环绕文本。

如果您要包装的内容可能包含长字符串（例如，绝对URL或诸如肺炎性显微显微术，硅伏火山菌病等科学/医学术语），请使用overflow-wrap伪指令将:last-of-type添加到第二个li级。

防止内联块包装但允许内容包装

4 个答案: