CSS 布局嵌套了 div 的奇怪行为

我有一个网页，我试图布局，它目前看起来像这样。https://i.stack.imgur.com/s4TOb.jpg

我希望紫色框与黄色框中的粉红色框内联，黄色框中的粉红色框位于绿色框中。当我将 css 中的显示字段更改为两个的内联块时，整个绿色框向下移动到灰色框的底部，高度 = 到黄色框。为什么会这样？

.CSS

div.localPlayer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left:0;
  height: 300px;
  background: rgb(181, 181, 181);
  text-align:center;
}
div.coinStatus {
  position: relative;
  top: 0px;
  left: 0px;
  display: block;
  width: 100%;
  height: 100px;
  background-color:yellow;
}
div.coinInfo {
  height: 100px;
  width: 100px;
  background: purple;
  display: block;
}
div.coin {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-color: pink;
  display: block;
  background-image: url('../images/6.png');
}
div.status {
  postion: relative;
  width: 400px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
  background: green;
}
div.card {
  width: 180px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
}
div.card.1 {
  background-image: url('../images/1.png');
}
div.card.2 {
  background-image: url('../images/2.png');
}
div.card.3 {
  background-image: url('../images/3.png');
}
div.card.4 {
  background-image: url('../images/4.png');
}
div.card.5 {
  background-image: url('../images/5.png');
}

.HTML

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="css/coup.css">
      <script src="js/jquery-2.1.3.min.js"></script>
      <script src="js/file.js"></script>
   </head>
   <body>
      <div> Image </div>
      <div id="this" class="localPlayer">
         <div id="card1" class="card 1"></div>
         <div id="card2" class="card 2"></div>
         <div id="status" class="status">
            <div id="coinStatus" class="coinStatus">
               <div class="coin"></div>
               <div id="numberOfCoins" class="coinInfo"></div>
            </div>
         </div>
      </div>
   </body>
</html>

inline-block元素的默认对齐方式是 vertical-align:bottom 。这样它就会从底部下降。对内联块元素应用vertical-align:top。希望它能解决问题。

 div.status {
 postion: relative;
 width: 400px;
 height: 280px;
 display: inline-block;
 margin: 10px;
 background-size: cover;
 border-radius: 10px;
 background: green;
 vertical-align:top;
 }
 div.card {
  width: 180px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
 vertical-align:top;
}

请检查这个" 添加浮点数：左可能会解决这个问题

div.localPlayer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left:0;
  height: 300px;
  background: rgb(181, 181, 181);
  text-align:center;
}
div.coinStatus {
  position: relative;
  top: 0px;
  left: 0px;
  display: block;
  width: 400px;
  height: 100px;
  background-color:yellow;
}
div.coinInfo {
  height: 100px;
  width: 100px;
  background: purple;
  display: block;
  float:left;
}
div.coin {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-color: pink;
  display: block;
  float:left;
}
div.status {
  postion: relative;
  width: 400px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
  background: green;
  vertical-align:top;
}
div.card {
  width: 180px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
  vertical-align:top;
}

相关内容

最新更新

热门标签：