制作復雜的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示例

您要切換高度屬性或完全刪除它們，然后讓內容動態填充。 由於沒有內容，因此在本示例中使用了它們，因此div變得可見。

Answer 2

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

#content{width:100%;
height:auto;
background: dimgrey;}

#video-content{width:80%;
height:370px;
margin:0 auto;}

#source{width:45%;
float:left;
height:auto;
}

#preview{width:45%;
float:left;
height:auto;
margin-left:10%;
}

#s-video{width:100%;
height:300px;
background-color:black;}


#p-video{width:100%;
height:300px;
background-color:black;}

#source-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}

#preview-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}

#segment-content:after {
    content: "";
    display: table;
    clear: both;}

#segment-content{width:80%;
margin: 20px auto;
height:300px;
background:blue;}

這將起作用，盡管不是編寫CSS的漂亮方法

Answer 3

我認為如果可以的話，使用預建框架會更好。 如purecss.io或bootstrap之類的東西。 但這也應該可以滿足您的需求。

https://jsfiddle.net/w5qfvezg/

.video-display {
  background-color: black;
  min-height: 200px;
}

.video-description {
  background-color: red;
  min-height: 50px;
}

body {
  padding: 5%;
  padding-left: 10%;
  padding-right: 10%;
  background-color: #999;
}

.video-item {
  width: 49%;
  float: left;
  margin-bottom: 20px;
}

.video-spacer {
  width: 2%;
  float: left;
  min-height: 200px;
}

#segment-content {
  background-color: blue;
  min-height: 200px;
}


<body>
  <div id='video-content'>
    <div class='video-item' id='source'>
      <div class='video-display' id="s-video">
      </div>
      <div class='video-description' id="source-controls">
      </div>
    </div>
    <div class='video-spacer'>
    </div>
    <div class='video-item' id='preview'>
      <div class='video-display' id='p-video'>
      </div>
      <div class='video-description' id="preview-controls">
      </div>
    </div>
  </div>
  <div style='clear:both'>
  </div>
  <div id="segment-content">
    <ul>
      <li></li>
    </ul>
  </div>
</body>

制作復雜的CSS網格

問題描述

3 個解決方案

解決方案1
0 已采納 2015-12-11 19:02:55

解決方案2
0 2015-12-11 19:07:54

解決方案3
0 2015-12-11 19:10:34

制作復雜的CSS網格

問題描述

3 個解決方案

解決方案1 0 已采納 2015-12-11 19:02:55

解決方案2 0 2015-12-11 19:07:54

解決方案3 0 2015-12-11 19:10:34

解決方案1
0 已采納 2015-12-11 19:02:55

解決方案2
0 2015-12-11 19:07:54

解決方案3
0 2015-12-11 19:10:34