Question

有人可以帮助我理解如何在图片（视频部分）上制作6个元素吗？

这是我到目前为止所拥有的：

.videos {
  width: 730px;
  height: 400px;
  float: left;
  margin: 15px 5px 15px 0px;
}
.videos > div {
  display: inline-block;
}
#big {
  height: 200px;
  width: 400px;
  background-color: #fff0e0;
}
#small {
  height: 90px;
  width: 200px;
  background-color: #fff0e0;
}

<div class="videos">
  <header>
    <h2>Videos</h2>
  </header>
  <a href="">Browse all videos</a>
  <br>
  <div id="big">Big video</div>
  <div id="small">Small video</div>
  <div id="small">Small video</div>
  <div id="small">Small video</div>
  <div id="small">Small video</div>
  <div id="small">Small video</div>
</div>

Answer 1

简单示例：

<强> HTML

<div id="left-wrapper-lg">

    <div class="big-col">
    </div>

    <div class="small-col">
    </div>

    <div class="small-col no-margin">
    </div>

</div>

<div id="left-wrapper-sm">

    <div class="full-col">
    </div>

    <div class="full-col">
    </div>

    <div class="full-col">
    </div>

</div>

<强> CSS

#left-wrapper-lg {
    float:left;
    width:64%;
    margin-right:2%;    
}

#left-wrapper-sm {
    float:left;
    width:34%;
    margin-right:0;
}

.no-margin { margin:0 !important;}

.big-col {
    float:left;
    width:100%;
    margin-right:0%;
}

.small-col {
    float:left;
    width:48%;
    margin-right:2;
}

.full-col {
    float:left;
    width:100%;
    margin:0;
}

Answer 2

更改您的css，jsFiddle

   .videos {
    width: 730px;
    height: 400px;
    float: left;
    margin: 15px 5px 15px 0px;
}

.videos > div {
    display: inline-block; 
}

#big {
    height: 200px;
    width: 400px;
    background-color: #fff0e0; 
    float:left;
    margin-right:10px;
   margin-bottom:10px;
}

#small {
    height: 90px;
    width: 195px;
    background-color: #fff0e0;
    margin-bottom:15px;
    margin-right:10px;
    float:left;
}

Answer 3

部分问题是宽度和高度不包括边距的大小。因此，如果您在所有内容之间有一个6像素的边距，而较大的矩形是200px高，则较小的矩形需要高出97px才能使所有内容对齐。

然后出现了空格问题：使用内联块，源中的换行符会占用一个空格，这会使事情失去对齐。我将内联块更改为浮动。

并且您无法在HTML文档中包含重复的ID。我需要将ID更改为类（这对CSS来说并不重要，但在其他情况下这将是一个大问题，因此最好安全地发挥它并且没有错误。）

您还错过了来源中的/;第二个<h2>应该是</h2>。

关于它。

＆＃13;

.videos {
  width: 630px;
  height:400px;
  margin: 15px 5px 15px 0px;
}
.videos > div {
  float: left;
  margin: 0 6px 6px 0;
  background-color: #fff0e0;
}

.big {
  height: 200px;
  width: 400px;
}
.small {
  height: 97px;
  width: 197px;
}

＆＃13;

<div class="videos">
  <header>
    <h2>Videos</h2>
  </header>
  <a href="">Browse all videos</a>
  <br>
  <div class="big">Big video</div>
  <div class="small">Small video</div>
  <div class="small">Small video</div>
  <div class="small">Small video</div>
  <div class="small">Small video</div>
  <div class="small">Small video</div>
</div>

＆＃13;

CSS元素定位（1大元素和5小）

3 个答案: