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>

如何正确对齐我的div

1 个答案: