分开彼此

Question

我正在尝试使用每个div旁边的描述将div放在彼此之上。在调整窗口大小时，div会相互缠绕。

现在我有两个带显示的div：inline-block。这两个描述也在他们自己的div中，但是使用填充来确保它们的位置正确（这看起来不正确）。我已经包含了我想要实现的示例图像。 我一直在自学HTML / CSS所以任何帮助将不胜感激！

以下是代码的简化版本：

calc1和calc2的CSS是相同的，以及calc1-desc和calc2-desc的CSS。

.calc1 {
  width: 22%;
  margin: 5%;
  border-style: solid;
  padding: 20px;
  background: white;
  display: inline-block;
}

.calc1-desc,
.calc1-desc ul {
  float: right;
  padding-top: 3.5%;
  padding-right: 5%;
  list-style-type: none;
}

<div id="body">
  <div class="w-calc1">
    <script type="text/javascript" src="calc1.js"></script>
  </div>
  <div class='calc1-desc'>
    <ul></ul>
  </div>


  <div class="calc2">
    <script type="text/javascript" src="calc2.js"></script>
  </div>
  <div class='calc2-desc'>
    <ul></ul>
  </div>
</div>

（我试图让它成为一种分页式视图）example

Answer 1

它似乎是一个基本的2行布局，每行有2列。您可以使用flex布局轻松实现此目的，例如：

* {
 box-sizing:border-box;
}
body {
 display:flex;
 flex-direction:column;
 margin:0;
 height:100vh;
}
.container {
  flex:1;
  display:flex;
  flex-direction:column;
}
.row {
  flex:1;
  display:flex;
}
.row>div:first-child {
  flex:1;
  background:blue;
  margin:20px;
  padding:5px;
  color:#fff;
  text-align:center;
}
.row>div:last-child {
  flex:2;
  margin:20px;
  padding:5px;
  text-align:center;
  background:pink;
}
header,footer {
 border:1px solid;
 padding:5px;
 text-align:center;
}

<header>Header</header>
<div class="container">
<div class="row">
<div class="div1">Div1</div>
<div class="desc-div1">Description div1</div>
</div>
<div class="row">
<div class="div2">Div2</div>
<div class="desc-div2">Description div2</div>
</div>
</div>
<footer>Footer</footer>