Question

我有两个div元素与图像相同。

enter image description here

Div 1：它显示来自服务器的内容，因此无法知道高度 Div 2：它的高度应与div 1的高度相同。

我没有HTML（CSS）经验，所以我不知道该怎么做。在这种情况下请帮助我。

非常感谢。

4 个答案:

答案 0 :(得分：3)

答案 1 :(得分：1)

答案 2 :(得分：1)

答案 3 :(得分：0)

Answer 1

试试这个：示例（http://jsfiddle.net/dzcvaxyx/）

<div id="wrapper">
<div id="one">
    <h1>DIV 1</h1>
    <h4>content</h4>
    <h4>content</h4>
    <h4>content</h4>
    <h4>content</h4>
</div>
<div id="two">
    <h1>DIV 2</h1>
</div>
</div>


#one, #two{
    width:150px;
    border:1px solid red;
    margin:10px;
    padding:10px;
}
#wrapper{
    margin:0 10px;
    display:flex;
}

使用包装器div。你的div1和div2的高度为100％。 div1的内容将设置div2将选择的高度。同样，如果div2获得更大的内容，它会自动延伸。

Answer 2

检查下面的小提琴样本

<强> HTML

<div id="one"></div>
<div id="two"></div>

<强> CSS

#one, #two{
    display:inline-block;
    width:150px;
    border:1px solid red;
    margin:0 10px;
    vertical-align:top;
}
#one{
    height:200px;
}

<强>脚本

$("#two").height($("#one").height());

Fiddle Demo

Answer 3

<强> HTML

 <div class="container">  
     <div class="Div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
     Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.   
     </div>  
 </div>

<强> CSS

.Div1, .Div2 {  
    float: none;  
    padding: 20px;  
    vertical-align: top;  
}  
.container {  
    display: table;  
}  
.Div1 {  
    width: 400px;  
    background-color: LightSlateGrey;  
    display: table-cell;  
}  
.Div2 {  
    width: 200px;  
    display: table-cell;  
    background-color: tan;  
}

看看这个：Fiddle

无论内容长度如何，两个div都将采用相同的高度。

Answer 4

使用弹性盒

<div class="flexbox">
  <div class="col"><h3>I ffasdfam lfisted ffasdf ac turpiasdfs egfasdfsafestas.</p></div>
  <div class="col"><p>Pefsdfsdaflledsfntesque hfsadfbitant morfsdafbi trdsfsdfissdafdsafsdafstique senesafdfasdfctus etsdaf netsdafus et malesuada fames ac turpis egestas. Vesdafsdafstibulum tsdafsdafortor quasdafsdfsm, feugidsfsdafsdat vitaedasf, ultricsdafsies esdafget, temposadfsar sitfsd amefsdat, antsdafdase.</p>
    <p>Donsdafsdafsec eu ldsfaibdsfsafero sitdsafsdf ametsdafds quadasfm egsdafestas sasfsdafemper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pesdafsdfllentesque habitsdafsdafsadant mogdffdsrbi trisasfdsdaftique sendsafsdafectussdaf sdafet sdafnetus et malasdfasfdsesuada famsdafes ac turpsafdis egestasadfs. Vestibulsadfum tosdafrtasfdor quasfdasdfasdafm, feugiat viaFdsftae, ultricies eget, temsaddfpor sit dsafamet, ante.</p>
    <p>Pellentesque hsfdfsdafabitant sdaforbi trsadfistique senectusadfs et netussdaf et malessdafuada fdsafames ac tusadfdsarpis egestas.</p>
  </div>
  <div class="col"><p>Pesdafsdafllsdafsdafentesque habisadftant mdassdafforbi trisdafsdstique senecsasdafsdafsddftus et netudasfsds et malesuada fameasfdss acsdaf tsdafsdafurpis egeasfdfstas.</p></div>
</div>

{{1}}

如何将div元素的高度设置为与另一个div相同

4 个答案: