我该如何正确对齐我的div

我正在尝试制作一个图片，其中包含我已经实现的文本，但是我希望它与右侧的段落文本一样内嵌，就像您在维基百科上看到的那样。我该如何正确对齐我的div

这是我有：

<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

来源

2017-10-12 Alesha Honnor

你可以试试这个：

通过在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>

来源

2017-10-13 00:05:20 Jonjie

不客气，很高兴它的工作。 – Jonjie

我该如何正确对齐我的div

回答

相关问题