如何顯示 <p> 在一個 <div> 具有內聯塊顯示屬性的元素？

Question

這就是我目前正在努力的...

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

我能夠將這個屬性與其他具有< h1 >和< li >元素的部分一起使用。 我能夠使用內聯塊，因為它們是塊級元素？ 我在w3網站上看到了這個信息http://www.w3schools.com/htmL/html_blocks.asp我還看到< div >標簽也是塊級元素。 我似乎無法理解為什么它不起作用。

Answer 1

干得好！ 你需要浮動左邊，寬度需要告訴它占據屏幕的三分之一。

另外，作為一種風格的東西，你可以給你所有的“scake”相同的類名，因為CSS樣式對於每一個都是相同的。 然后，如果您更改一個樣式，它將為所有這些更新它。

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