Question

如何使两个div高度与css相等。我希望看到这两个div并排。

<div data-role="main" class="ui-content">
        <h2>Welcome to my Popup Dialog!</h2>
        <p>jQuery Mobile is FUN!</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">
 <img border="0"  src="abc.jpg" width="1000" height="1000">
</a>
      </div>

OR

<div>How to make two div heights equal with css.How to make two div heights equal with css.</div>

Answer 1

假设您有并排的div，您可以轻松使用：

display:flex

您的HTML是：

<div class="row">
  <div class="col">How to make two div heights equal with css.How to make two div heights equal with css.</div>

  <div class="col">How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.How to make two div heights equal with css.</div>
</div>

CSS将是：

.row {
    display: flex; /* equal height of the children */
}

.col{
    border: 1px solid black;
    flex:1; // use this if you want width to be equal as well

}

请参阅小提琴：http://jsfiddle.net/9qzzu1c7/

Answer 2

如果我理解正确你想要他们并排导致div实际上出现在彼此之下？如果是这样的话：

我希望看到这两个div并排。

https://jsfiddle.net/ym2c64ay/

<div id="parent">
<div>How to make two div heights equal with css.How to make two div heights equal with css.</div>
<div>How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css. How to make two div heights equal with css.</div>
</div>

div{
    background: #F00;
    float: left;
    width: 50%;
}

Answer 3

假设只有两个div，你可以使用这个css

div{display:inline-block;height:400px;width:48%;overflow-y:scroll;}

demo

根据需要更改高度。您也可以将溢出设置为自动。

Answer 4

有多种方法可以并排显示div，您可以将floats与static widths and heights一起使用，也可以将display inline-block与percent widths and static heights一起使用。

但是，如果没有明确给出高度，没有人会真正给你两个div的等高。如果你有静态高度，它就没有多大帮助，因为如果你需要的文本需要更长时间，高度不能再保持文本数量。

实现此目标的一种简单方法是使用table row和cell，如下所示： http://jsfiddle.net/7ch85rs1/

如果它们在一个容器中，如何平行增加两个div高度

4 个答案: