将div相对于div相对于div定位的内容

Question

我想用 div 元素

生成以下模板

我的想法是，我希望 div 元素具有相对于包含它的另一个 div 元素的特定位置，该元素本身相对于另一个定位包含它的div 元素。

我通过使一个位置：绝对和容器具有位置来获得两个 div 元素之间的关系：相对

但是如何相对于 big 容器创建它。

这是一张图片，解释了我在顶部描述的内容以及我想要实现的目标。

Answer 1

我设法在JSFiddle上为你做了一些代码。你走了：

JSFiddle Demo

您可以根据您的项目放大输出窗口的宽度，然后设置宽度等。

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}

* {
  webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  margin: 50px auto 0;
  max-width: 600px;
}

.outer_div {
  border: 3px solid green;
  padding: 10px;
}

.inner_div {
  padding: 10px;
}

.inner_div .box:nth-child(3n) {
  margin: 0;
}

.inner_div .box {
  border: 3px solid #03A9F4;
  width: 172px;
  float: left;
  height: 200px;
  margin: 0 auto 12px;
  margin-right: 10px;
}

.inner_div {
  padding: 10px;
  border: 2px solid red;
  display: block;
  width: 98%;
  margin: 10px auto 0;
  overflow: auto;
}

.inner_div:last-child {
  padding-bottom: 0;
}

＆＃13;

<div class="wrapper">
  <div class="outer_div">
    <div class="inner_div">
      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>

      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>
    </div>

    <div class="inner_div">
      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>
      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>
      <div class="box1">

      </div>
    </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：

HTML：

<div class="div1">
    <div class="div2">
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
    </div>
    <div class="div2">
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div class="div3"></div>
    </div>
</div>

CSS：

.div1 {
    width:300px;
    height:400px;
}
.div2 {
    width:100%;
    height:50%;
}
.div3 {
    width:33.3%;
    height:50%;
    float:left;
}

或者您可以简单地使用HTML表格。

Answer 3

为了探索另一种可能性，这是一个flexbox示例： http://codepen.io/JKudla/pen/evPJPW

CSS：

main {
  display: flex;
  flex-direction: column;
}

section {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

article {
  width: 33.3333%;
}

HTML：

<main>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</main>