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

Question

我想将一个段落放在<iframe>Google地图的右侧.

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

Answer 1

只需使用浮动样式.将你的谷歌地图iframe放在div类中,然后将段落放在另一个div类中,然后将以下CSS样式应用于那些div类(不要忘记在浮动效果后清除块,不要让块在它们下面出现问题) :

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>

Answer 2

你有两个选择,float:left或者display:inline-block.

两种方法都有他们的警告.现在似乎display:inline-block更常见,因为它避免了一些浮动问题.

阅读这篇文章,http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/或这一个http://www.vanseodesign.com/css/inline-blocks/了更详细的讨论.

Answer 3

您可以简单地使用 somediv来制作容器，display: flex;并使内容并排显示，如下所示：

CSS

.splitscreen {
    display:flex;
}
.splitscreen .left {
    flex: 1;
}
.splitscreen .right {
    flex: 1;
}

HTML

<div class="splitscreen">
    <div class="left">
        <!-- content -->
    </div>

    <div class="right">
        <!-- content -->
    </div>
</div>

用flex你说谁会使用更多的屏幕空间。

Answer 4

如果增加文本量使其大于父容器的宽度,则这些解决方案似乎都不起作用,右侧的元素仍然会移动到左侧的元素下方,而不是保留在它旁边.要解决此问题,您可以将此样式应用于左侧元素:

position: absolute;
width: 50px;

并将此样式应用于正确的元素:

margin-left: 50px;

只需确保右边元素的左边距大于或等于左边元素的宽度.不需要浮动或其他属性.我建议将这些元素包装在一个带有样式的div中:

display: inline-block;

根据周围的元素,可能不需要应用此样式

小提琴:http: //jsfiddle.net/2b0bqqse/

您可以看到右侧的文字高于左侧的黑色元素.如果删除绝对定位和边距而不是像其他人建议的那样使用float,右边的文本将下拉到左边的元素下方

小提琴:http: //jsfiddle.net/qrx78u20/

Answer 5

为了您的iframe一外部div用style display:inline-block,并为您的段落div也给display:inline-block

HTML

<div class="side">
    <iframe></iframe>
</div>
<div class="side">
    <p></p>
</div>

CSS

.side {
   display:inline-block;
}