我該如何正確對齊我的div

Question

我正在嘗試製作一個圖片，其中包含我已經實現的文本，但是我希望它與右側的段落文本一樣內嵌，就像您在維基百科上看到的那樣。

這是我有：

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

我希望它像

enter image description here

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 U.S. edition</h3> 
 
<div class="pull-right"> 
 
    <img src="https://i.stack.imgur.com/bGNJ6.png" alt="Title page, 1911 U.S. 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>