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

2 个答案: