html - 如何使用 CSS 并排放置两个元素

Question

我想在 <iframe> 的右侧放置一个段落谷歌地图。

我不知道如何显示我的代码，所以这是我想要的截图:

Answer 1

只需使用 float 样式。将你的google map iframe放在一个div类中，将段落放在另一个div类中，然后将以下CSS样式应用于这些div类(不要忘记在 float 效果后清除 block ，以免它们下方的 block 出现问题) :

CSS

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

html

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>