Html 如何将 3 个不同的段落并排放置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26539063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place 3 different paragraphs next to each other?
提问by Jabir Al Fatah
In my footer I want to make 3 different sections of paragraphs-at left, middle and right. The 3 paragraphs should sit next to each other, not below each other.
在我的页脚中，我想在左侧、中间和右侧制作 3 个不同的段落部分。这 3 个段落应该并排放置，而不是彼此下方。
This is how I was trying to do, but I failed to figure it out.
这就是我试图做的，但我没能弄明白。
<footer>
<div id="footer_box">
<p id="footer_text_left">
should sit at the left.
</p>
<p id="footer_text_middle">
should sit in the middle.
</p>
<p id="footer_text_right">
should sit at the right.
</p>
</div>
</footer>
.CSS:
.CSS：
#footer_box{
border-top:2px solid #009933;
padding-bottom:75px;
background-color:#3366CC;
}
#footer_text_left{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_middle{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_right{
font-size:15px;
font-family:Euphemia;
color:black;
}
回答by GSaunders
First option:
第一个选项：
p {
float: left;
}
Second option:
第二种选择：
p {
float: left;
width: 30%;
margin: 0 1%;
}
Third option (best):
第三个选项（最佳）：
p {
display: inline-block;
}
Another thing I saw was that every paragraph had the same rules, you could set the font properties on the body or global paragraph so you won't need to set it on everything.
我看到的另一件事是每个段落都有相同的规则，您可以在正文或全局段落上设置字体属性，这样您就不需要在所有内容上都设置它。
That would look like this:
那看起来像这样：
body {
font-size:15px;
font-family:Euphemia;
color:black;
}
Or if you want it just on the footer paragraphs:
或者，如果您只想在页脚段落上使用它：
footer p {
font-size:15px;
font-family:Euphemia;
color:black;
}
回答by Jacob Gray
This is Extremelyeasy to do, either by making the <p>'s inline-block, or float:leftthem:
这是非常容易做到的，通过制作<p>'sinline-block或float:left它们：
#footer_box p{
display:inline-block;
}
inline-block, (or inline) is the best way to do it, as float:left, has some unwanted effects, such as the <p>'s no longer effect the height of their parent, as can be seen in this JSFiddle, compare it with the one below.
inline-block, (或inline) 是最好的方法，因为float:left， 有一些不需要的影响，例如<p>不再影响其父级的高度，如在此JSFiddle 中所见，将其与下面的进行比较。
JSFiddle
JSFiddle
See this SO question about it: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
看到这个关于它的问题：float:left; vs 显示：内联；vs 显示：内联块；vs 显示：表格单元格；
回答by Srishti Sinha
Just capture the paragraph into a div and add style. For example
只需将段落捕获到 div 中并添加样式。例如
<div style="float: left; margin-right: 20px">
Here's how I did for a paragraph containing picture: https://jsfiddle.net/xomkq7dv/7/
这是我为包含图片的段落所做的：https: //jsfiddle.net/xomkq7dv/7/
