Выравнивание трех абзацев рядом друг с другом HTML и CSS

Question

Я уже видел этот вопрос, но все ответы не работают. Вот проблема, я создал три абзаца, поместил их под тегом div, который называется end. Я позже использовал CSS следующим образом:

#end{ 
background-color:#AEAEAE; 
border:#FFFFFF; 
border-width:thin; 
border-style:solid; 
padding: 50px; 
margin-left:auto; 
margin-right:auto; 
padding-bottom: 13em; 
} 

#end p{ 
display-inline:block; 
float: left; 
padding:1em; 
} 

Я попытался поплавать влево; изменение отступов вокруг/ширина/высота. Он просто продолжает смеяться. Если это имеет значение, я использую Dreamweaver.

Answer 1

см jsfiddle: http://jsfiddle.net/p1kuzzdo/2/

#end { 
    background-color: #aeaeae; 
    border: thin solid #ffffff; 
    box-sizing: border-box; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 50px 50px 13em; 
    width: 100%; 
} 

#end p { 
    box-sizing: border-box; 
    float: left; 
    padding: 1em; 
    width: 33.333%; 
} 

Answer 2

1. потому что вы добавляете прокладку; Используйте размер окна, чтобы поддерживать размер тэгов.
2. установить ширину на р тегах трети ширины

#end{ 
 
background-color:#AEAEAE; 
 
border:#FFFFFF; 
 
border-width:thin; 
 
border-style:solid; 
 
padding: 50px; 
 
margin-left:auto; 
 
margin-right:auto; 
 
padding-bottom: 13em; 
 
    
 
} 
 

 
#end p{ 
 
display-inline:block; 
 
float: left; 
 
padding:1em; 
 
    
 
\t box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
    width: 33.3% 
 
}

<div id="end"> 
 
    <p>Fugiat quo voluptas nulla pariatur? Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Esse cillum dolore eu fugiat nulla pariatur. Eaque ipsa quae ab illo inventore veritatis et quasi. Et harum quidem rerum facilis est et expedita distinctio. Et harum quidem rerum facilis est et expedita distinctio.</p> 
 
    <p>Fugiat quo voluptas nulla pariatur? Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Esse cillum dolore eu fugiat nulla pariatur. Eaque ipsa quae ab illo inventore veritatis et quasi. Et harum quidem rerum facilis est et expedita distinctio. Et harum quidem rerum facilis est et expedita distinctio.</p> 
 
    <p>Fugiat quo voluptas nulla pariatur? Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Esse cillum dolore eu fugiat nulla pariatur. Eaque ipsa quae ab illo inventore veritatis et quasi. Et harum quidem rerum facilis est et expedita distinctio. Et harum quidem rerum facilis est et expedita distinctio.</p> 
 
</div>