Question

我有一个网页即时尝试布局，它当前看起来像这样。 http://imgur.com/zu4OXHu

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

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>

Answer 1

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

Answer 2

请检查此“添加浮动：左侧可能会解决此问题

”

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

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

2 个答案: