堆栈内存溢出
  繁体   English   中英

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

[英]Align image while keeping height

 原文  2015-06-22 14:40:24  6   5    html/ css

问题描述

我有一张要与div的一侧对齐的图像。 我也有一些段落需要与此图像一起显示。 但是，它们没有足够的文本内容来完全达到图像的高度。 我需要的段落下方的内容必须在图片下方。

对图像使用float:left无效，因为具有所需的并排段落的图像的容器div不会响应浮动元素的高度。

使用position:relative; left:0px 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>

这是小提琴 。

编辑

在查看了这些答案之后，我发现了一个更优雅的解决方案： 

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

这采用了明确修复的想法，并使它更易于应用。

5 个解决方案

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

从您的p标签中删除inline-block （因此它们默认为block ），然后将float:left; 回到您的img标签。 还添加float:left; 并clear:left将其clear:left在div标签上，使它们始终在彼此下方流动。

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>

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

按照演示中的说明更新了HTML，并应用以下CSS类： 

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

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

如何使用clear:both属性呢？ 您只需要插入一个简单的<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>

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

为了使用浮动文本进行简单的图像对齐，可以在图像内使用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>

在这里摆弄 。

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

尝试在容器div上使用： 

display: inline-block;

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

float: left;

如何在<div>同时保持它在右边？</div><div id="text_translate"><p> 我不知道该怎么做，我试过使用 position，但它只是对齐到页面的中间，而不是 div。</p><p> 我试图在中间垂直对齐它。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .img1 { float: right; width: 20%; margin-right: 200px; display: inline-block; vertical-align: middle; }.img1 { border-radius: 50%; border: 5px solid white }.container { width: 100%; height: 500px; background-color: black; display: inline-block; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;img class="img1" src="https://via.placeholder.com/500.jpg"&gt; &lt;/div&gt;</pre></div></div><p></p></div>

[英]how can I vertically align this image within the <div> while keeping it to the right?

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何指定图像的宽度和高度，同时保持响应？ CSS 使图像以移动视图为中心，同时保持高度相同？ 如何在保持高度不变的情况下水平缩小背景图像 具有固定高度的柔性滑板，同时保持图像纵横比与溢出隐藏 保持高宽比为60％的图像 如何在<div>同时保持它在右边？</div><div id="text_translate"><p> 我不知道该怎么做，我试过使用 position，但它只是对齐到页面的中间，而不是 div。</p><p> 我试图在中间垂直对齐它。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .img1 { float: right; width: 20%; margin-right: 200px; display: inline-block; vertical-align: middle; }.img1 { border-radius: 50%; border: 5px solid white }.container { width: 100%; height: 500px; background-color: black; display: inline-block; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;img class="img1" src="https://via.placeholder.com/500.jpg"&gt; &lt;/div&gt;</pre></div></div><p></p></div> CSS 裁剪图像以适应屏幕宽度，同时保持图像的原始高度 css垂直对齐div，同时保持边距 在保持基本结构的同时对齐div 如何根据用户的视口增加图像宽度和高度，同时保持纵横比不变？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM