如何正確對齊div

Question

我正在嘗試使用已實現的文字下方的圖像進行制作，但我希望它與右側的段落文字保持一致，就像您在Wikipedia上看到的一樣。

這就是我所擁有的：

<div class="img-with-text"; style= text-align: right; >
<img src="250px-PeterAndWendy.png" alt="Title page, 1911 U.S. edition" 
 align="right">
        <p> Title page, 1911 U.S. edition </p> 
        </div>

<p> a bunch of text </p> 

和我的CSS：

 /* makes text stay under image */
 .img-with-text {
 text-align: justify;
 width: 250px;

 }

.img-with-text img {
display: block;
margin: 0 auto;
text-align: right;

我希望它像

在此處輸入圖片說明

Answer 1

您可以嘗試以下方法：

通過在CSS中使用float屬性，您可以輕松地將元素推入/推入右側/左側。

 .pull-right{ float: right; margin: 10px; padding: 5px; } img{ width: 100px; border: solid 1px #000000; padding: 5px; } .center{ text-align: center; } p.center{ margin: 0; } .body{ text-align: justify; padding: 20px; } 

 <h3 class="center">Title page, 1911 US edition</h3> <div class="pull-right"> <img src="https://i.stack.imgur.com/bGNJ6.png" alt="Title page, 1911 US edition"> <p class="center">Img txt</p> </div> <p class="body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut mattis dui. Nam viverra erat ac ullamcorper scelerisque. Nunc eget augue ex. Proin eleifend velit porttitor velit tristique, in viverra est pulvinar. Sed aliquam rhoncus hendrerit. Nunc at lectus sodales, vestibulum odio ac, vehicula eros. Etiam congue hendrerit lectus sit amet commodo. Vestibulum gravida, sapien non porta tempus, urna turpis tempor quam, id placerat arcu ligula lacinia magna.Nunc suscipit tincidunt vulputate. Quisque mi risus, hendrerit gravida euismod a, ullamcorper ut quam. Nulla ornare metus at est accumsan varius. Etiam scelerisque est nulla, vel scelerisque est facilisis ut. Phasellus ac ullamcorper quam. Integer ante massa, accumsan nec lacus id, finibus luctus nisi. Quisque sed mollis mauris, et egestas elit. Suspendisse malesuada mi vel urna lobortis, id hendrerit sapien consectetur. </p>