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

Question

I have an image, that I want to be aligned to one side of a div. 我有一张要与div的一侧对齐的图像。 I also have paragraphs that need to go alongside this image. 我也有一些段落需要与此图像一起显示。 However, they do not have enough text content to reach all the way down the height of the image. 但是，它们没有足够的文本内容来完全达到图像的高度。 The content beneath the paragraphs I have needs to be below the image. 我需要的段落下方的内容必须在图片下方。

Using float:left for the image does not work, since the container div for the image with the desired alongside paragraphs does not respond to the height of floated elements. 对图像使用float:left无效，因为具有所需的并排段落的图像的容器div不会响应浮动元素的高度。

Using position:relative; left:0px 使用position:relative; left:0px position:relative; left:0px for the image also does not work. position:relative; left:0px也不起作用。 With this, I have tinkered with the display of the paragraphs, but they always go beneath the image instead of beside. 这样，我便修改了段落的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>

Here is the Fiddle . 这是小提琴。

EDIT 编辑

After reviewing these answers, I found a more elegant solution: 在查看了这些答案之后，我发现了一个更优雅的解决方案：

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

This takes the idea of clear fix and makes it more readily-applicable. 这采用了明确修复的想法，并使它更易于应用。

Answer 1

Remove inline-block (so they default to block ) from your p tags and then put your float:left; 从您的p标签中删除inline-block （因此它们默认为block ），然后将float:left; back in to your img tags. 回到您的img标签。 Also add float:left; 还添加float:left; and clear:left to the div tag so they always flow under one another. 并clear:left将其clear:left在div标签上，使它们始终在彼此下方流动。

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

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

 <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>

Answer 2

Updated the HTML as for in the demo , and apply these CSS class: 按照演示中的说明更新了HTML，并应用以下CSS类：

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

Answer 3

what about using the attribute clear:both ? 如何使用clear:both属性呢？ you just need to insert a simple <div class="clear"></div> and give it clear:both in CSS 您只需要插入一个简单的<div class="clear"></div>并在CSS中将其clear:both

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

 <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>

Answer 4

For simple image alignment with floating text you can use align="left within the image. 为了使用浮动文本进行简单的图像对齐，可以在图像内使用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

Try using on the container div: 尝试在容器div上使用：

display: inline-block;

Or you can float all the elements to the left: 或者，您可以将所有元素浮动到左侧：

float: left;

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

问题描述

5 个解决方案

解决方案1
2 2015-06-22 14:52:34

解决方案2
1 已采纳 2015-06-22 14:55:44

解决方案3
1 2015-06-22 15:09:41

解决方案4
0 2015-06-22 14:45:42

解决方案5
0 2015-06-22 14:50:08

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

问题描述

5 个解决方案

解决方案1 2 2015-06-22 14:52:34

解决方案2 1 已采纳 2015-06-22 14:55:44

解决方案3 1 2015-06-22 15:09:41

解决方案4 0 2015-06-22 14:45:42

解决方案5 0 2015-06-22 14:50:08

解决方案1
2 2015-06-22 14:52:34

解决方案2
1 已采纳 2015-06-22 14:55:44

解决方案3
1 2015-06-22 15:09:41

解决方案4
0 2015-06-22 14:45:42

解决方案5
0 2015-06-22 14:50:08