Question

我之前看到过这个问题，但所有答案都不起作用。这是问题，我创建了三个段落，将它们放在名为end的div标签下。我后来以下列方式使用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

因为你正在添加填充;使用box-sizing来维护p标签的大小。
将p标签的宽度设置为宽度的三分之一

#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;
  
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-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>

Answer 2

看到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%;
}

将三段并排HTML和CSS对齐

2 个答案: