JSFiddle

Question

在我的页脚中，我想在左，中，右三个段落中创建段落。这3段应该彼此相邻，而不是彼此相邻。

这就是我试图做的事情，但我没想弄清楚。

<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：

#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;

    }

Answer 1

第一个选项：

p {
  float: left;
}

第二个选项：

p {
  float: left;
  width: 30%;
  margin: 0 1%;
}

第三个选项（最佳）：

p {
 display: inline-block;
}

我看到的另一件事是每个段落都有相同的规则，您可以在正文或全局段落上设置字体属性，这样您就不需要在所有段落上设置它。

看起来像这样：

body {
   font-size:15px;
   font-family:Euphemia;
   color:black;
}

或者，如果您只想在页脚段落上找到它：

footer p {
    font-size:15px;
    font-family:Euphemia;
    color:black;
}

Answer 2

通过制作<p>＆＃39; s inline-block或float:left来实现极其：

#footer_box p{
    display:inline-block;
}

inline-block，（或inline）是最佳方式，因为float:left会产生一些不必要的影响，例如<p>＆＃39; s不再影响其父级的高度，如此JSFiddle中所示，请将其与下一个进行比较。

JSFiddle

请参阅此问题：float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 3

将段落捕捉到div并添加样式。例如

<div style="float: left; margin-right: 20px">

以下是我对包含图片的段落的处理方式：https://jsfiddle.net/xomkq7dv/7/

如何将3个不同的段落放在一起？

3 个答案:

JSFiddle