87

我有以下标记：

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

我想要它，这样如果文本换行，它就不会进入图像的“列”。我知道我可以用（我正在做的）来做到这一点，但由于这个原因table这是不可行的。

我尝试了以下但没有成功：

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

我也试过了float: right。

谢谢。

编辑：我希望它看起来像这样：

IMG   Text starts here and keeps going... and
      wrap starts here.

不像这样：

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.
4

6 回答 6

260

这个问题的非常简单的答案似乎吸引了很多人：

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

见例子：http: //jsfiddle.net/vandigroup/upKGe/132/

于 2013-03-14T22:17:12.573 回答
35

由于这个问题获得了很多意见并且这是公认的答案，我觉得有必要添加以下免责声明：

这个答案特定于 OP 的问题（在示例中设置了宽度）。虽然它有效，但它要求您在每个元素、图像和段落上都有一个宽度。除非这是您的要求，否则我建议使用Joe Conlin 的解决方案，该解决方案作为该问题的另一个答案发布。

该span元素是内联元素，您不能在 CSS 中更改其宽度。

您可以将以下 CSS 添加到您的跨度中，以便您能够更改其宽度。

display: block;

另一种通常更有意义的方法是使用<p>元素作为<span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

由于<p>它是一个block元素，因此您可以使用 CSS 设置其宽度，而无需更改任何内容。

但是在这两种情况下，由于您现在有一个块元素，您需要浮动图像，以便您的文本不会全部低于图像。

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS 除了float:left在图像上，您也可以戴上float:right，li p但在这种情况下，您还需要text-align:left正确地重新对齐文本。

PSS 如果您继续使用不添加<p>元素的第一个解决方案，您的 CSS 应该如下所示：

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
于 2012-07-10T10:51:03.870 回答
25

对于那些想要一些背景信息的人，这里有一篇简短的文章解释了为什么overflow: hidden有效。它与所谓的块格式化上下文有关。这是 W3C 规范的一部分（即不是 hack），基本上是由具有块类型流的元素占据的区域。

每次应用时，overflow: hidden都会创建一个新的块格式化上下文。但它并不是唯一能够触发该行为的属性。引用 Sydney Web Apps Group 的 Fiona Chan 的演讲：

  • 浮动：左/右
  • 溢出：隐藏/自动/滚动
  • 显示：表格单元格和任何与表格相关的值/内联块
  • 位置：绝对/固定
于 2013-10-31T23:49:00.773 回答
3

如果你想margin-left在一个span元素上工作，你需要制作它display: inline-block或display:block同样。

于 2012-07-10T10:37:08.737 回答
2

文本的设置display:flex对我有用。

于 2017-10-02T13:52:59.387 回答
1

在图像和跨度周围包裹一个 div 并将以下内容添加到 CSS 中，如下所示：

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

较少的

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
于 2015-04-21T19:42:07.117 回答