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

【问题标题】：How to position two elements side by side using CSS如何使用CSS并排放置两个元素
【发布时间】：2022-04-09 02:25:07
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案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/ 以获得更详细的讨论。

【讨论】：

"display: inline-block" 是正确的。 "float: left" 在定位项目时可能会导致一些麻烦..

【解决方案3】：

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

.splitscreen {
  display: flex;
}

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

<div class="splitscreen">
  <div class="left">
    Content
  </div>

  <div class="right">
    Content
  </div>
</div>

【讨论】：

【解决方案4】：

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

position: absolute;
width: 50px;

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

margin-left: 50px;

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

display: inline-block;

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

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

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

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

【讨论】：

只有当总宽度（浮动在左侧 + 右侧 + 内边距 + 边距 + 边框的元素）超过屏幕宽度的 100% 时，文本才会移到下方。

【解决方案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;
}

【讨论】：

【解决方案6】：

使用浮动或内联元素：

例如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>

【讨论】：

【解决方案7】：

像这样

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

JSFiddle Demo

【讨论】：

【解决方案8】：

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

Fiddle

【讨论】：

【解决方案9】：

您可以float 元素（地图包装器和段落），或者对它们都使用inline-block。

【讨论】：

【解决方案10】：

将 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/

【讨论】：

【解决方案11】：

将iframe 放在<p> 中，并制作iframe CSS

float:left;

显示：内联块；

【讨论】：

【解决方案12】：

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

.foo{
    float: left;
}

【讨论】：

如果您已经漂浮，display:inline-block 无效。