Question

As you can see here we have an image and a header next to it. https://jsfiddle.net/bL77g9bf/1/

Now when I make the window smaller all the text goes below the image, rather than just pieces of the sentence going to the next line (while staying to the right of the image).

How do I achieve this effect, without using floats?

Code:

<div class="wrap">
    <img src="http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg">

        <h1>This is a heading</h1>
</div>

img {
    display:inline-block;
    width:200px;
}

h1 {
    display:inline-block;
    vertical-align:top;
}

Answer 1

这是我推荐浮动的唯一情况。你有一个图像和文字在一起，并希望文本优雅地流动图像。

您使用浮动的问题是它没有正确清除，请使用以下解决方案来解决该问题。

＆＃13;

.wrap {
    white-space: nowrap;
    background: red;
}
.wrap::after {
    content: "";
    clear: both;
    display: block;
}
.wrap > img {
    width:200px;
    float: left;
}
.wrap > h1 {
    vertical-align:top;
    white-space: initial;
}

＆＃13;

<div class="wrap">
    <img src="http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg">
    <h1>This is a heading blah blah blah blah blah</h1>
</div>

＆＃13;

Have Inline-Block h1 break line when window gets smaller

1 个答案: