Question

我是网络开发的新手，我刚刚开始了我的第一个项目。

问题在于我似乎无法在图像旁边浮动多个元素。一个漂浮在图像旁边的顶部，另一个漂浮在顶部漂浮在图像旁边的最底部。我希望他们两个都在彼此。

这就是我所拥有的

HTML：

<div class="container">
  <div class="Main-Heading text-center ">
    <h1>Albert Einstein 1879-1955</h1>
  </div>

  <div class="picture">
    <img class="img-rounded img-thumbnail img-responsive" src="http://science-all.com/images/albert-einstein/albert-einstein-04.jpg" name="Albert Einstein" alt="Albert Einstein posing for a picture with his hands crossed">
    <blockquote cite="http://www.brainyquote.com/quotes/authors/a/albert_einstein.html">
      The important thing is not to stop questioning. Curiosity has its own reason for existing.
    </blockquote>
    <p>Albert Einstein was a German-born theoretical physicist.</p>

  </div>


</div>

这就是我所拥有的

CSS：

.Main-Heading h1 {
   display: inline-block;
   color: black;
   font-size: 70px;
   font-family: Candal;


}
.picture p {
  float: right;
  display: inline-block:


}
.picture blockquote {
  float: right;
  font-family: Pacifico, sans-serif;
  font-size: 17px;

}
.container {
  background-color: rgb(230, 230, 230);
}
.main_text {

}

.picture {
  display: inline-block;


}
body {


}

Answer 1

将您的图片浮动。

将此添加到您的css：

.picture img {
   float: left;
}

不要忘记事后清除，但在浮动元素之后加<div style="clear: both;"></div>。

请参阅this previously asked question，其中也可提供一些方便的信息。

如何在图像旁边添加多个元素？

1 个答案: