html - 使 div 出现在其他的旁边

Question

我已经开始对我的 CSS 知识进行大量修改。 我正在尝试执行以下操作: 我想创建一个包装器 div，其中包含带有一些文本和一些内容的 div。我希望每个带有类 item-2 的 div 在该 div 中具有宽度:50% 并出现在另一个 item-2 旁边。 这是我的代码片段:

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto;  
}
.item-2{
    text-align:center;
    display:inline-block;
    width:50%;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}

<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>  

如您所见，它的 div 出现在其前一个 div 的下方。但是我希望它们彼此相邻。我怎样才能做到这一点？我想对您的解决方案进行解释，以增加我的知识

Answer 1

Flex 可以让它们排成一排。

.wrapper {
  display: flex;
 }

并移除元素的display: inline block。如果你想在小型设备中将它们放在彼此下面，请将此添加到 .wrapper

  flex-wrap: wrap;

我们需要一个 min-width 用于元素。 .items: min-width: 250px;.如果您的设备有足够的空间 (500px)，它们将保留在一行中，否则第二个元素将转到下一行。