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

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 高才能使所有东西对齐。

然后是 spaces 的问题：对于内联块，源代码中的换行符水平占据 space，这会使事情失去对齐。我将内联块更改为浮动。

而且 HTML 文档中不能有重复的 ID。我需要将 ID 更改为类.
（这对CSS来说不是很重要，但在其他情况下会是个大问题，所以最好谨慎行事，不要出错。）

你还遗漏了源码中的一个/；第二个 <h2> 应该是 </h2>.

就是这样。

.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;
}

<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>

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

CSS elements positioning (1 big element and 5 small)

css

css-position