CSS 停止图像下的文本包装

我有以下标记:

<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.
120469 次浏览
小开

If you want the margin-left to work on a span element you'll need to make it display: inline-block or display:block as well.

小开
最佳答案

Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:

This answer was specific to the OP's question (Which had the width set in the examples). While it works, it requires you to have a width on each of the elements, the image and the paragraph. Unless that is your requirement, I recommend using Joe Conlin's solution which is posted as another answer on this question.

The span element is an inline element, you can't change its width in CSS.

You can add the following CSS to your span so you will be able to change its width.

display: block;

Another way, which usually makes more sense, is to use a <p> element as a parent for your <span>.

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

Since <p> is a block element, you can set its width using CSS, without having to change anything.

But in both cases, since you have a block element now, you will need to float the image so that your text doesn't all go below your image.

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

P.S. Instead of float:left on the image, you can also put float:right on li p but in that case, you will also need text-align:left to realign the text correctly.

P.S.S. If you went ahead with the first solution of not adding a <p> element, your CSS should look like so:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
小开

Very simple answer for this problem that seems to catch a lot of people:

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


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

See example: http://jsfiddle.net/vandigroup/upKGe/132/

小开

For those who want some background info, here's a short article explaining why overflow: hidden works. It has to do with the so-called block formatting context. This is part of W3C's spec (ie is not a hack) and is basically the region occupied by an element with a block-type flow.

Every time it is applied, overflow: hidden creates a new block formatting context. But it's not the only property capable of triggering that behaviour. Quoting a presentation by Fiona Chan from Sydney Web Apps Group:

  • float: left / right
  • overflow: hidden / auto / scroll
  • display: table-cell and any table-related values / inline-block
  • position: absolute / fixed
小开

Wrap a div around the image and the span and add the following to CSS like so:

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%;
}

LESS

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


> div:first-of-type {
width: 35%;
}
> div:last-of-type {
width: 65%;
}
}
小开

setting display:flexfor the text worked for me.


提交答案