Question

根据评论更新

我正在尝试通过制作宽度为30％的容器来在完整大小的页面上创建div部分。在这些内容中，我计划在其中对齐2或3个div大小。我有一个大盒子的行占据了100％的高度，宽度的一部分，然后是一个正好是一半大小的盒子。我想让所有这些半尺寸的盒子与更大的盒子在同一行，以创建一个漂亮的堆栈。我认为这是一个大小与位置的问题，但我没有太多的运气，我过度思考这个问题。

小提琴：https://jsfiddle.net/as9hud4k/10/

HTML：

<div class="content_section">
    <div class="content_thirdsize">
        <div class="content_thirdsize_inner_row">
            <div class="content_thirdsize_inner_large"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>
            <div class="content_thirdsize_inner_small"> </div>

            <div class="content_thirdsize_inner_small"> </div>
        </div>
    </div>
</div>

CSS：

.content_thirdsize
{
    width: 500px;
    height: 500px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    background-color: rgba(83, 35, 128, 0.2);
}

.content_thirdsize_inner_row
{
    width: 500px;
    height: 105px;
    display: inline-block;
    background-color: rgba(83, 35, 128, 0.2);
    margin: 2px;
}

.content_thirdsize_inner_large
{
    position: relative;
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: rgba(83, 35, 128, 0.2);
    border: 1px dashed #000;
    vertical-align: left;
}

.content_thirdsize_inner_small
{
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: rgba(83, 35, 128, 0.2);
    border: 1px dashed #000;
    vertical-align: right;
}

Answer 1

我建议使用位置，然后使用left，right，top，bottom对齐div。选择一个在你的脑海中有意义的位置设置来移动div然后摆弄它的位置，直到它们按照你想要的方式排列。

正如paulie_D在评论中所说，多次不使用ID，它们应该是唯一的。您希望使用类在多个对象上应用相同的样式。我的一般规则是类用于应用样式，ID用于标识页面上的特定对象。

Answer 2

我怀疑数学可能需要调整以考虑间距，但flexbox可以在这里做很多工作。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
section {
  display: flex;
  margin: auto;
}
.content-wrap {
  display: flex;
  flex-wrap: nowrap;
  padding: 5px;
  background: orange;
}
.small-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 350px;
}
.large,
.small {
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  border: 2px dotted white;
}
.small {
  width: 50px;
  height: 50px;
}

<section>
  <div class="content-wrap">
    <div class="large"></div>
    <div class="small-wrap">
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div </div>
    </div>
</section>

Codepen Demo

如何在容器中对齐混合大小的div？

2 个答案: