html - 制作一个复杂的CSS网格

Question

我快要被这个 CSS 东西搞疯了。我不太懂这门语言..并且无法完成我需要做的事情。

我有这个html

<div id="content">      
    <div id="video-content">
        <div id="source">
            <div id="s-video">
            </div>
            <div id="source-controls">
            </div>
        </div>

        <div id="preview"> 
            <div id="p-video">
            </div>
            <div id="preview-controls">
            </div>
        </div>      
    </div>

    <div id="segment-content">
        <ul>
            <li></li>
        </ul>
    </div>
</div>

我必须做到这一点:

到目前为止我的 CSS 代码:

body {
  margin: 0;
  padding: 0;
  /*font-family: Helvetica, Arial, sans-serif;*/
  /*color: #666;*/
   background: #141414; 
  /*font-size: 1em;*/
  /*line-height: 1.5em;*/
}

#content {
 background: dimgrey;
 width: 97%;
 height: 90%;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
}

#video-content {
  background-color: #7F7F7F;
  position: fixed;
  width: 300px;
  z-index: 20;
}

 #segment-content {
   background-color: #7F7F7F;
   position: fixed;
   width: 300px;
 }

到目前为止我对做这个响应不感兴趣

Answer 1

要获得干净的网格，您必须稍微更改 html 结构。

<div id="content">
  <div id="video-content">
  <div class="row">
    <div class="col-1-2">
      <div id="source"></div>
      <div id="s-video">
      </div>
      <div id="source-controls">
      </div>
    </div>
    <div class="col-1-2">
      <div id="preview">
        <div id="p-video">
        </div>
        <div id="preview-controls">
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="row">
    <div class="col-1-1">
      <div id="segment-content">
      </div>
    </div>
  </div>
</div>

这是我制作的一个示例，说明如何实现与您的屏幕截图类似的效果: Codepen example

您想关闭高度属性或完全删除它们并让内容动态填充。我在这个例子中使用了它们，因为我们没有内容，所以 div 变得可见。