Question

我有一张图片，我希望与div的一边对齐。我还有段落需要与此图像并列。但是，它们没有足够的文本内容可以一直向下到达图像的高度。我所有段落下面的内容需要低于图像。

对图像使用float:left不起作用，因为带有所需旁边段落的图像的容器div不会响应浮动元素的高度。

对图像使用position:relative; left:0px也不起作用。有了这个，我用段落的display进行了修改，但它们总是在图像下方而不是在旁边。

h3 {text-align:center}
img {position:relative;left:0px}
p {display:inline-block;}

<body>
<div>
    <div>
        <h3>Header Here</h3>
        <img src="http://www.devtano.com/software/eco/images/console.png"/>
        <p>This paragraph should be next to the image.</p>
        <p>This paragraph should also be next to the image.</p>
    </div>
    <div>
        <h3>Another Header</h3>
        <p>Everything from the above header and down should appear below the image.</p>
    </div>
</div>
</body>

这是Fiddle。

修改

在回顾这些答案后，我找到了一个更优雅的解决方案：

h3 {clear:both; text-align:center}
img {float:left; margin-right:10px}

这需要明确修复的想法，并使其更容易适用。

Answer 1

从inline-block标记中删除block（因此默认为p），然后将float:left;重新加入img标记。同时将float:left;和clear:left添加到div代码中，以便它们始终互相流动。

https://jsfiddle.net/bowp6aea/3/

＆＃13;

div {float:left;clear:left;}
h3 {text-align:center}
img {float:left;}

＆＃13;

<body>
    <div>
        <div>
            <h3>Header Here</h3>
            <img src="http://www.devtano.com/software/eco/images/console.png"/>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
            <p>
                Vivamus auctor tortor sit amet ipsum volutpat, eu malesuada lorem euismod. Duis nec placerat nibh, vehicula gravida purus. Cras facilisis dictum elit vel gravida. Phasellus egestas eu mi nec cursus. Integer eget dui nibh. Nunc porta in tortor quis ullamcorper. Nulla tristique imperdiet ligula, vel dictum risus scelerisque sit amet. Phasellus elit metus, gravida vitae risus ut, faucibus vulputate mauris. Praesent eget magna sit amet sem bibendum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, ante sit amet elementum auctor, nulla mi iaculis tellus, et mattis nisi purus vitae sem. Vestibulum sit amet quam eget arcu congue commodo sit amet sit amet dui.
            </p>
        </div>
        <div>
            <h3>Another Header</h3>
            <p>
                Phasellus tincidunt enim ex, a dapibus nunc ultricies vitae. Integer interdum enim quis elit gravida auctor. Etiam non ullamcorper orci, eget luctus eros. Quisque posuere neque pretium urna accumsan, ac pellentesque erat dignissim. Maecenas at mi sapien. Proin lacus mauris, imperdiet bibendum orci sed, placerat ornare ipsum. Vivamus luctus quam id orci scelerisque, sed lobortis tellus finibus. Nam et eros sed arcu tristique tempus.
            </p>
        </div>
    </div>
</body>

＆＃13;

Answer 2

更新了the demo中的HTML，并应用了这些CSS类：

h3 {text-align:center; clear:both;}
img {float:left}
.inner-wrap p {display:inline;}

Answer 3

使用属性clear:both怎么样？您只需要插入一个简单的<div class="clear"></div>并在CSS中提供clear:both

＆＃13;

.clear {
  clear: both
}
h3 {
  text-align: center
}
img {
  float: left;
  margin-right: 10px  /*demo */
}

＆＃13;

<div>
  <div>
    <h3>Header Here</h3>
    <img src="http://www.devtano.com/software/eco/images/console.png" />
    <p>This paragraph should be next to the image.</p>
    <p>This paragraph should also be next to the image.</p>
    <div class="clear"></div>
  </div>
  <div>
    <h3>Another Header</h3>
    <p>Everything from the above header and down should appear below the image.</p>
  </div>
</div>

＆＃13;

Answer 4

对于使用浮动文本的简单图像对齐，您可以在图像中使用align="left。

        <p>
            <img align="left" src="http://www.devtano.com/software/eco/images/console.png"/>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>

Fiddle here

Answer 5

尝试使用容器div：

display: inline-block;

或者您可以将所有元素浮动到左侧：

float: left;

在保持高度的同时对齐图像

5 个答案: