如何显示 <p> 在一个 <div> 具有内联块显示属性的元素？

Question

This is what I am currently working on...

 .scake_one { color: #cc3300; display: inline-block; } .scake_two { color: #cc3300; display: inline-block; } .scake_three { color: #cc3300; display: inline-block; } 

 <div class="scake_one"> <h1>CAKE ONE</h1> <p>Lorem ipsum etiam porttitor ultrices <br>tortor tempus vehicula.</p> </div> <div class="scake_two"> <h1>CAKE TWO</h1> <p>Lorem ipsum eu quisque velit <br>quam convallis massa tellus.</p> </div> <div class="scake_three"> <h1>CAKE THREE</h1> <p>Lorem ipsum sed mauris aenean <br>pretium pulvinar.</p> </div> 

I was able to use this property well with an other section that had < h1 > and < li > elements. I was able to used inline-block because they are block level elements? I saw this info on the w3 site http://www.w3schools.com/htmL/html_blocks.asp I also saw that < div > tags are also block level elements. I can't seem to understand why it isn't working.

Answer 1

Here you go! You need float-left, and the width needs to tell it to take up a third of the screen.

Also, just as a style thing, you can give all of your "scake" the same class name, because the CSS styling is the same for each one. Then if you change the style on one, it'll update it for all of them.

 .scake { color: #cc3300; display: inline-block; float: left; max-width: 32%; margin-left: .5%; margin-right: .5%; } 

 <div class="scake"> <h1>CAKE ONE</h1> <p>Lorem ipsum etiam porttitor ultrices <br>tortor tempus vehicula.</p> </div> <div class="scake"> <h1>CAKE TWO</h1> <p>Lorem ipsum eu quisque velit <br>quam convallis massa tellus.</p> </div> <div class="scake"> <h1>CAKE THREE</h1> <p>Lorem ipsum sed mauris aenean <br>pretium pulvinar.</p> </div>