两个div的水平对齐

Question

我知道有很多关于这个主题的话题，但我不明白为什么我的代码不起作用。我找到了一个很好的样本 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

感谢帮助！

Answer 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>

Answer 2

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

.line1 {
  width: 100%;
}

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

您当然也可以使用浮点数，这将需要额外的步骤来清除它们。

这是工作solution

两个div的水平对齐

Horizontal Align of two divs

html

css

alignment