74

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

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

4

12 回答 12

59

只需使用浮动样式。将你的谷歌地图 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>
于 2013-09-30T08:47:42.850 回答
51

您有两个选择，要么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/更详细的讨论。

于 2013-09-30T08:54:33.017 回答
22

您可以简单地使用 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你说谁会在屏幕上使用更多的空间。

于 2018-10-02T17:17:16.850 回答
16

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

position: absolute;
width: 50px;

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

margin-left: 50px;

只需确保右侧元素的 margin-left 大于或等于左侧元素的宽度。不需要浮动或其他属性。我建议使用以下样式将这些元素包装在 div 中：

display: inline-block;

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

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

您可以看到右侧的文本比左侧的黑色轮廓元素高。如果您删除绝对定位和边距，而是按照其他人的建议使用浮动，则右侧的文本将下降到左侧元素的下方

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

于 2014-12-18T19:47:42.230 回答
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;
}
于 2013-09-30T08:48:41.400 回答
4

使用浮动或内联元素：

示例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>
于 2013-09-30T08:52:26.007 回答
2

像这样

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

JSFiddle 演示

于 2013-09-30T08:51:58.897 回答
1

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

只要有空间，该段落就会被强制向上和向右移动。然后将你的段落设置为 display: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/

于 2013-09-30T08:56:25.043 回答
1

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

小提琴

于 2013-09-30T08:46:06.603 回答
1

您可以float使用元素（地图包装器和段落），也可以inline-block同时使用它们。

于 2013-09-30T08:46:58.130 回答
1

放入iframe内部<p>并制作iframeCSS

float:left;

显示：内联块；

于 2013-09-30T08:47:51.750 回答
0

给你的盒子上课foo（或其他）并添加css

.foo{
    float: left;
}
于 2013-09-30T08:48:07.270 回答