html - 我怎样才能右对齐我的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="/image/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>