两个div的水平对齐答案

【问题标题】：Horizontal Align of two divs两个div的水平对齐
【发布时间】：2015-07-22 17:50:28
【问题描述】：

我知道有很多关于这个主题的话题，但我不明白为什么我的代码不起作用。我找到了一个很好的样本here 所以我有一个 div，我想在其中显示另外两个 div - 彼此相邻。绿色的必须显示在左侧并水平填充 75%，而蓝色的只能显示 25%，但水平显示在绿色 div 旁边，而不是垂直显示。

查看代码：

 <div class="section2">
            <div class="referencesPics"> 
                <div class="line1">
                    <div class="leftPic">
                    hi
                    </div>
                    <div class="rightPic">
                    hallo
                    </div>
                </div>
                <div class="line2">
                    <div class="leftPic">
                    </div>
                    <div class="rightPic">
                    </div>
                </div>
                <div class="line3">
                    <div class="leftPic">
                    </div>
                    <div class="rightPic">
                    </div>
                </div>
                <div class="line4">
                    <div class="leftPic">
                    </div>
                    <div class="rightPic">
                    </div>
                </div> 
            </div>        
        </div>

CSS：

.section2 {
    height:100%;
}

.section2 .referencesPics {
    height:25%;
}

.section2 .referencesPics .line1 {
    height:100%;
    background-color:blue;
    display: inline-block; *display: inline; zoom: 1; vertical-align: top;
}

.section2 .referencesPics .line1 .leftPic {
    height:100%;
    width:75%;
    background-color:green;
    display: inline-block; *display: inline; zoom: 1; vertical-align: top;
}

.section2 .referencesPics .line1 .rightPic {
    height:100%;
    width:25%;
    background-color:yellow;
display: inline-block; *display: inline; zoom: 1; vertical-align: top;
}

.section2 .referencesPics .line2 {
    height:100%;
    background-color:yellow;
}

.section2 .referencesPics .line3 {
    height:100%;
    background-color:brown;
}

.section2 .referencesPics .line4 {
    height:100%;
    background-color:green;
}

还可以查看Fiddle

感谢您的帮助！

【问题讨论】：

你有很多奇怪的 CSS 代码。您将 section2 的高度更改 7 次。但是对于你的问题。使用浮动：左；或浮动：对；而不是：显示：内联块；显示：内联；缩放：1 垂直对齐：顶部；

标签： html css alignment

【解决方案1】：

更新你的代码看看这个。

.section2 {
  width: 100%;
}
.leftPic {
  width: 75%;
  background-color: green;
  float: left
}
.rightPic {
  width: 25%;
  float: left;
  background-color: blue;
}

<div class="section2">
  <div class="referencesPics">
    <div class="line1">
      <div class="leftPic">
        hi
      </div>
      <div class="rightPic">
        hallo
      </div>
    </div>

    <div class="line1">
      <div class="leftPic">
        hi
      </div>
      <div class="rightPic">
        hallo
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使其与 display:inline-block 一起使用，但您必须删除 html 中 div 之间的空格才能使其正常工作

.line1 {
  width: 100%;
}

.leftPic {
  width: 75%;
  background-color: green;
  display:inline-block;
}
.rightPic {
  width: 25%;
  display:inline-block;
  background-color: yellow;
}

您当然也可以使用浮动来执行此操作，这需要额外的步骤来清除它们。

这是工作的solution

【讨论】：