如何使用inline-block的display属性在</p> <div>元素中显示<p>？

Question

这就是我目前的工作......

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我能够将此属性与其他具有< h1 >和< li >元素的部分一起使用。我能够使用内联块，因为它们是块级元素？我在w3网站上看到了这个信息 http://www.w3schools.com/htmL/html_blocks.asp我还看到< div >标记也是块级元素。我似乎无法理解为什么它不起作用。

Answer 1

你走了！你需要浮动左边，宽度需要告诉它占据屏幕的三分之一。

另外，作为一种风格的东西，你可以给你所有的＆＃34; scake＆＃34;相同的类名，因为每个CSS的样式都是相同的。然后，如果您更改一个样式，它将为所有样式更新它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;