html - 使用 CSS 用盒子填充矩形

Question

我正在尝试创建一个充满颜色框的矩形

以下是我的代码:

<div class="col-md-3" >
  <div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;">
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass0'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass1'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass2'/>           
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass3'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass4'/>
    <div style="height:10px;background-color:#FFA500;" id='pass5'/>
    <div style="height:10px;background-color:#FFA500;" id='pass6'/>
  </div>
</div>

我想要类似这样的东西:

但是，我无法获得箱子。我做错了什么？

Answer 1

您需要关闭您的 div标签正确使用 </div>而不仅仅是 /> .

要让每个框的高度填满整个 div，您可以给每个子 div 一个百分比高度。在您的情况下，您将拥有 14.28% (元素数量/100)。

<div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;">
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass0'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass1'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass2'></div>           
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass3'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass4'></div>
  <div style="height:14.28%;background-color:#FFA500;" id='pass5'></div>
  <div style="height:14.28%;background-color:#FFA500;" id='pass6'></div>
</div>