如何将响应文本和div并排

Question

我想在单行文本和3个div中，在第二行中有另一个文本和三个div等。 目前这就是它的样子 我的代码是

svg {
    margin-left: 0%;
    float: left;
    height: 12%;
    width: 28%;
}
h2{
  left: 2%;
  font-size: 2em;
  padding-top: 180px;
  top: -40px;
}

我不能使用类名，因为每个div都有一个不同的，动态获取，并且有超过30个div。这就是为什么我试图通过使用h2和div作为元素来修复它。

我使用此代码管理

div {
        margin-left: 10px;
        float: right;
        bottom: 1852px;
        position: relative;
        height: 12%;
        width: 28%;
    }
    h2{
      left: 2%;
      position: relative;
      font-size: 2em;
      padding-top: 180px;
      top: -40px;
    }

实现我正在尝试的目标

但它在不同的屏幕上是不同的。有时显示4个div，其他时间显示2个div。我试过位置：固定但无法成功。我不熟悉CSS，我真的很挣扎。

Answer 1

使用percentage创建div。 或者，您可以使用calc()计算框的边距。

.box-container {
  border: 1px solid #500;
}
.box {
  display: inline-block;
  width: 20%;
}
.box-text {
  display: inline-block;
  padding: 10px;
  box-sizing: border-box;
  width: 40%;
}
.content {
  box-sizing: border-box;
  border: 1px solid red;
}
.inner {
   margin: 10px;
   padding: 10px;
   background-color: #CCC;
}

其他解决方案是div框内的create another div并添加边距。

Answer 2

使用display:table，display:table-row和display:table-cell组合，如下所示，并保持元素完美到位。

html, body {
  height: 100%; /* just in case you want it to span whole height */
  margin: 0; /* otherwise dont use this */
  padding: 0;
}
div.table {
  display: table;
  width: 100%;
  height: 100%; /* just in case you want it to span whole height */
  /* otherwise use a custom height */
}
div.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  padding: 10px; /* creating gaps */
  vertical-align: middle; /* aligning to middle */
}
div.table-cell {
  width:25%; /* width of the content parent */
}
div.content {
  background-color: grey;
  height: 100%;
}

<div class="table">
  <div class="table-row">
    <h2 class="table-cell">text 1</h2>
    <div class="table-cell"><div class="content"></div></div>
    <div class="table-cell"><div class="content"></div></div>
    <div class="table-cell"><div class="content"></div></div>
  </div>
  <div class="table-row">
    <h2 class="table-cell">text 2</h2>
    <div class="table-cell"><div class="content"></div></div>
    <div class="table-cell"><div class="content"></div></div>
    <div class="table-cell"><div class="content"></div></div>
  </div>
  <div class="table-row">
    <h2 class="table-cell">text 3</h2>
    <div class="table-cell"><div class="content"></div></div>
    <div class="table-cell"><div class="content"></div></div>
    <div class="table-cell"><div class="content"></div></div>
  </div>
</div>