Question

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

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

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

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

position: absolute;
width: 50px;

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

margin-left: 50px;

确保右边元素的左边距大于或等于左边元素的宽度。不需要浮动或其他属性。我建议将这些元素用样式包装在div中：

display: inline-block;

根据周围的元素

，可能不需要应用此样式

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

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

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

Answer 4

对于iframe给div style display:inline-block div，display:inline-block段<div class="side"> <iframe></iframe> </div> <div class="side"> <p></p> </div>也提供.side { display:inline-block; }

<强> HTML

{{1}}

<强> CSS

{{1}}

Answer 5

使用float或inline元素：

示例JSBIN

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div>float example</div>
  <div><div style="float:left">Floating left content</div><div>Some content</div></div>
  <div>inline block example</div>
  <div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>

Answer 6

喜欢这个

**

demo

**

<强> CSS

.block {
    display: inline-block;
    vertical-align:top;
}

Answer 7

您可以使用float:left将div对齐一行。

Fiddle

Answer 8

你可以float元素（地图包装和段落），或者在他们两个上使用inline-block。

Answer 9

将iframe放入<p>并制作iframe css

float:left; display:inline-block

Answer 10

将iframe包装在一个类中，向左浮动。

只要有足够的空间，该段落就会被迫向上和向右。然后将段落设置为显示：inline-block，并添加一些左边距以整理它。

<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>


.left { float: left; }
p { display: inline-block; margin-left: 30px;  }

这是一个小提琴：http://jsfiddle.net/4DACH/

Answer 11

您可以简单地使用一些div来创建一个容器，并使用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 12

给你的方框foo（或其他），并添加css

.foo{
    float: left;
}

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

12 个答案: