如何并排显示父div的2个子div而不是一个在另一个下？没有任何方法对我有用

Question

我有这段代码，无论子元素是否具有内联块、浮动或任何其他属性，div 都会继续显示一个在另一个之上。

发生什么事了？

CSS：

#resources {
position: fixed; top: 0; left: 0;
z-index: 1;
display: block;
width: 4%;
background: rgba(0, 160, 255, 1);
color: white;
font-size: 1.5em;
padding: 0.5em;
border-radius: 10%;
}

#woodResource #stoneResource {
  display: inline-block;
  float: left;
}

html:

 <div id="resources">
        <div id="woodResource">
            <img src="/models/wood.png" id="wood">
            0
        </div>
        <div id="stoneResource">
            <img src="/models/stone.png" id="stone">
            0
        </div>
    </div>

显示： 在此输入图片描述

我尝试了所有我能找到的建议和方法，比如内联块、浮动，但没有一个有效。

Answer 1

增加父级的宽度，以便两个子级都可以容纳（4% 对两个子级来说都太窄），并在选择器中使用逗号

#woodResource, #stoneResource { ... }

#resources {
position: fixed; top: 0; left: 0;
z-index: 1;
display: block;
width: 20%;
background: rgba(0, 160, 255, 1);
color: white;
font-size: 1.5em;
padding: 0.5em;
border-radius: 10%;
}

#woodResource, #stoneResource {
  display: inline-block;
}

 <div id="resources">
        <div id="woodResource">
            <img src="/models/wood.png" id="wood">
            0
        </div>
        <div id="stoneResource">
            <img src="/models/stone.png" id="stone">
            0
        </div>
    </div>