Question

我希望.firstcontainer div中的两个div容器并排显示，所以我给了它们display: inline-block，但这似乎不起作用。

＆＃13;

.firstcontainer {
  display: block;
}

.imagecontainer {
  display: inline-block;
  margin-left: 70px;
}

.SeasonCounterContainer {
  margin-left: 20px;
  display: inline-block;
}

＆＃13;

<div class="centralcontainer">
  <div class="firstcontainer">
    <div class="imagecontainer">
      <img src="http://subs-40ea.kxcdn.com/posters/better-call-saul.jpg" alt="">
    </div>
    <div class="SeasonCounterContainer">
      <p>46 min | Crime, Drama</p>
    </div>
  </div>
</div>

＆＃13;

注意：我已经尝试过不同的解决方案，但没有一个适合我。

Answer 1

您必须在这些内联块上使用width设置才能将它们并排放置，因为内联块的默认宽度是其内容的宽度，最多为父级的100％。此外，图像宽度需要限制为不超过其容器的宽度。

＆＃13;

.firstcontainer {
  display: block;
}

.imagecontainer {
  display: inline-block;
  margin-left: 70px;
  width: 200px;
}

.imagecontainer img {
  width: 100%;
  height: auto;
}

.SeasonCounterContainer {
  margin-left: 20px;
  display: inline-block;
  width: 150px;
}

＆＃13;

<div class="centralcontainer">
  <div class="firstcontainer">
    <div class="imagecontainer">
      <img src="http://placehold.it/600x400/fa0">
    </div>

    <div class="SeasonCounterContainer">
      <p>46 min | Crime, Drama</p>
    </div>
  </div>
</div>

＆＃13;

显示属性问题

1 个答案: