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

How to position two elements side by side using CSS

提问by Jake J??skel?inen Hazelwood

I want to position a paragraph to the right of an <iframe>of a Google map.

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

I do not know how to show my code, so here is a screenshot of what I want:

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

采纳答案by Anna Gabrielyan

Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):

只需使用浮动样式。将你的google map iframe放在一个div类中，将段落放在另一个div类中，然后将以下CSS样式应用到这些div类中（不要忘记清除浮动效果后的块，以免使下面的块出现问题） ：

css

css

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

html

html

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>

回答by PA.

You have two options, either float:leftor display:inline-block.

你有两个选择，要么float:left还是display:inline-block。

Both methods have their caveats. It seems that display:inline-blockis more common nowadays, as it avoids some of the issues of floating.

这两种方法都有其注意事项。现在似乎display:inline-block更常见，因为它避免了一些浮动问题。

Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/or this one http://www.vanseodesign.com/css/inline-blocks/for a more in detail discussion.

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

回答by Joe Sager

None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container, the element to the right still gets moved below the one to the left instead of remaining next to it. To fix this, you can apply this style to the left element:

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

position: absolute;
width: 50px;

And apply this style to the right element:

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

margin-left: 50px;

Just make sure that the margin-left for the right element is greater than or equal to the width of the left element. No floating or other attributes are necessary. I would suggest wrapping these elements in a div with the style:

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

display: inline-block;

Applying this style may not be necessary depending on surrounding elements

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

Fiddle: http://jsfiddle.net/2b0bqqse/

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

You can see the text to the right is taller than the element to the left outlined in black. If you remove the absolute positioning and margin and instead use float as others have suggested, the text to the right will drop down below the element to the left

您可以看到右侧的文本比左侧以黑色勾勒出的元素高。如果您删除绝对定位和边距，而是像其他人建议的那样使用浮动，则右侧的文本将下拉到左侧元素的下方

Fiddle: http://jsfiddle.net/qrx78u20/

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

回答by Lpgoulart

you can simple use some divto make a container and the display: flex;to make the content appear side-by-side like this:

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

CSS

CSS

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

HTML

HTML

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

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

using flexyou say who will use more space on the screen.

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

回答by Ajith S

For your iframegive an outer divwith styledisplay:inline-block, And for your paragraph divalso give display:inline-block

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

HTML

HTML

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

CSS

CSS

.side {
   display:inline-block;
}

回答by guymid

Use either float or inline elements:

使用浮动或内联元素：

Example JSBIN

示例JSBIN

HTML:

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>

回答by Falguni Panchal

Like this

像这样

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

JSFiddle Demo

JSFiddle 演示

回答by jaybong

Wrap the iframe in a class, float that left.

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

The paragraph with then be forced up and to the right as long as there is room for it. Then set your paragraph to display:inline-block, and add some left margin to tidy it up.

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

Here's a fiddle: http://jsfiddle.net/4DACH/

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

回答by Sobin Augustine

Put the iframeinside the <p>and make the iframeCSS

放入iframe里面<p>并制作iframeCSS

float:left;

display:inline-block;

显示：内联块；

回答by Roopendra

You can use float:leftto align div in one line.

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

Fiddle

小提琴