<iframe>
我想在谷歌地图的右边放置一个段落。
我不知道如何显示我的代码,所以这是我想要的截图:
只需使用浮动样式。将你的谷歌地图 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>
您有两个选择,要么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/更详细的讨论。
您可以简单地使用 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
你说谁会在屏幕上使用更多的空间。
如果您增加文本量使其大于父容器的宽度,这些解决方案似乎都不起作用,右侧的元素仍会移动到左侧的下方而不是留在它旁边。要解决此问题,您可以将此样式应用于左侧元素:
position: absolute;
width: 50px;
并将此样式应用于正确的元素:
margin-left: 50px;
只需确保右侧元素的 margin-left 大于或等于左侧元素的宽度。不需要浮动或其他属性。我建议使用以下样式将这些元素包装在 div 中:
display: inline-block;
根据周围的元素,可能不需要应用此样式
小提琴:http: //jsfiddle.net/2b0bqqse/
您可以看到右侧的文本比左侧的黑色轮廓元素高。如果您删除绝对定位和边距,而是按照其他人的建议使用浮动,则右侧的文本将下降到左侧元素的下方
小提琴:http: //jsfiddle.net/qrx78u20/
给你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;
}
使用浮动或内联元素:
示例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>
将 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/
您可以使用float:left
将 div 对齐在一行中。
您可以float
使用元素(地图包装器和段落),也可以inline-block
同时使用它们。
放入iframe
内部<p>
并制作iframe
CSS
float:left;
显示:内联块;
给你的盒子上课foo
(或其他)并添加css
.foo{
float: left;
}