Как разместить 3 разных абзаца рядом друг с другом?

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> ' с inline-block, или float:left их:

#footer_box p{ 
    display:inline-block; 
} 

inline-block, (или inline) - это лучший способ сделать это, как float:left, имеет некоторые нежелательные эффекты, такие как <p> 's больше не влияют на высоту их родителя, как видно из этого JSFiddle, сравните его с один ниже.

JSFiddle

Смотрите этот SO вопрос об этом: 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/