html - 水平对齐一个div中的两个div

Question

目前遇到问题。下面的粉红色框在一个部分内。目前是:

section {
    height: 341px;
    background: purple;
    border-radius: 5px;
    margin: 0 1.5% 24px 1.5%;
    text-align: center;
    clear: both; }

.vid {
    border-radius: 5px;
    margin: 0 1.5% 24px 1.5%;
    text-align: center;
    background: pink;
    height:300px;
    width:656px; }

根据 HTML 请求:

<section>
        Section
        <div class="vid">
        <div class="image1">
</section>

每次我尝试在它旁边添加另一个不同宽度的图像时，什么都没有出现。尝试使其具有与左侧相同的间距等(因此紫色左侧和粉红色起始侧之间的间隙)。

有什么建议吗？新类将命名为 image1 。

Answer 1

水平并排对齐两个div，需要给两个div都增加宽度并添加display: inline-block;。

这是一个例子:

section {
  height: 341px;
  background: purple;
  border-radius: 5px;
  margin: 0 1.5% 24px 1.5%;
  text-align: center;
  clear: both;
}

.vid {
  border-radius: 5px;
  margin: 0 1.5% 24px 1.5%;
  text-align: center;
  background: pink;
  height: 300px;
  width: 300px;
  display: inline-block;
}
.image1{
  width: 300px;
  height: 300px;
  background: pink;
  display: inline-block;
}

<section>
  <div class="vid">
    Div 1
  </div>
  <div class="image1">
    Div 2
  </div>
</section>