堆棧內存溢出
  簡體   English   中英

在保持高度的同時對齊圖像

[英]Align image while keeping height

 原文  2015-06-22 14:40:24  3   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