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>

Answer 2

下面做了一点测试，它应该可以正常工作。现在，这些框位于该部分的中心（就像它在您的代码中一样，但不在您的图片中）。如果您希望对齐左侧，请将text-align更改为左侧。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <section>
    <div id="image0" class="vid"></div>
    <div id="image1" class="vid"></div>
  </section>
</head>
<body>

</body>
</html>

Answer 3

您的html标记对于彻底了解您的问题非常有用。但是，如果我理解正确，您希望图像与.vid元素位于同一行。

在这种情况下，问题是您需要向display: inline-block元素添加.vid个问题。它允许元素具有宽度和高度，但在其他所有方面都将其视为内联对象（例如span）。

此外，您似乎可能在overflow: hidden元素或其中一个父元素上指定了section属性，否则您的图像应显示在该部分下方。

基本上你的css可以是这样的：

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

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

您可以在此pen

上试用

在div中水平对齐两个div彼此相邻

3 个答案: