如何将3个不同的段落彼此相邻放置？

Question

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.

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:

#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

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

Answer 2

This is Extremely easy to do, either by making the <p> 's inline-block , or float:left them:

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

JSFiddle

See this SO question about it: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 3

Just capture the paragraph into a div and add style. For example

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

Here's how I did for a paragraph containing picture: https://jsfiddle.net/xomkq7dv/7/