Javascript CSS布局嵌套div'；这是一种奇怪的行为_Javascript_Html_Css_Layout

Javascript CSS布局嵌套div'；这是一种奇怪的行为

javascript html css layout

Javascript CSS布局嵌套div'；这是一种奇怪的行为,javascript,html,css,layout,Javascript,Html,Css,Layout,我有一个网页，我试图布局，它目前看起来像这样。我希望紫色框与黄色框中的粉红色框（在绿色框中）内联。当我将css中的显示字段更改为两个文本的内联块时，整个绿色框向下移动到灰色框的底部w/height=黄色框。为什么会这样 CSS HTML 形象内联块元素默认对齐方式为垂直对齐：底部。这样它就会降到底部。为内联块元素应用垂直对齐：top。希望它能解决这个问题 div.status { postion: relative; width: 400px; height: 280px; d

我有一个网页，我试图布局，它目前看起来像这样。

我希望紫色框与黄色框中的粉红色框（在绿色框中）内联。当我将css中的显示字段更改为两个文本的内联块时，整个绿色框向下移动到灰色框的底部w/height=黄色框。为什么会这样

CSS

HTML


形象

内联块

元素默认对齐方式为

垂直对齐：底部

。这样它就会降到底部。为内联块元素应用

垂直对齐：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{
位置：固定；
底部：0；
宽度：100%；
左：0；
高度：300px；
背景：rgb（181181181181）；
文本对齐：居中；
}
司币状态{
位置：相对位置；
顶部：0px；
左：0px；
显示：块；
宽度：400px；
高度：100px；
背景颜色：黄色；
}
硬币信息部{
高度：100px；
宽度：100px；
背景：紫色；
显示：块；
浮动：左；
}
硬币{
宽度：100px；
高度：100px；
背景尺寸：封面；
背景颜色：粉红色；
显示：块；
浮动：左；
}
部门地位{
职位：亲属；
宽度：400px；
高度：280px；
显示：内联块；
利润率：10px；
背景尺寸：封面；
边界半径：10px；
背景：绿色；
垂直对齐：顶部；
}
分区卡{
宽度：180px；
高度：280px；
显示：内联块；
利润率：10px；
背景尺寸：封面；
边界半径：10px；
垂直对齐：顶部；
}

请删除不必要的CSS规则并检查每个CSS规则在

div.status上尝试垂直对齐：top：
<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>

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