[英]Make two DIVs the same height? #2
我在較早時提出了這個主題,並且已經提出了解決方案,但是由於某種原因它不起作用,我希望找到更多的幫助。
我想使兩個DIV的高度相同(因此,當一個div的高度變大時,另一個div的高度也應相同)。
這是我的HTML:
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
我希望.aProductHeader .omschrijving
和.aProduct .omschrijving
保持相同的高度。
這是我當前的CSS:
.aProductHeader .omschrijving {
background: #cac;
min-height: 30px;
}
.aProduct .omschrijving {
background: #cec;
min-height: 30px;
}
這是已經建議給我的解決方案,我把它放在:
<script>
var one = document.getElementsByClassName(".aProductHeader .omschrijving"),
two = document.getElementsByClassName(".aProduct .omschrijving");
for (i = 0; i < one.length; i++)
{
if (one[i].offsetHeight > two[i].offsetHeight)
{
two[i].style.height = one[i].offsetHeight+"px";
}else{
one[i].style.height = two[i].offsetHeight+"px";
}
}
</script>
但是,我仍然得到的結果是:
有關如何執行此操作的任何想法?
您可以嘗試...實際上標題具有邊距,因此將h3的CSS編寫為
h3 {
margin: 0;
}
如果上面的方法有效,則嘗試下面的結構。
<div>
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
</div>
並將此CSS添加到您的CSS
.aProductHeader .omschrijving {
background: #cac;
min-height: 30px;
}
.aProductHeader {
float: left;
}
.aProduct {
overflow: hidden;
}
.aProduct .omschrijving {
background: #cec;
min-height: 30px;
}
h3 {
margin: 0;
}
.aProduct{background-color: #FFFFFF;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
position: relative;} .aProductHeader{border-top: 1px solid #CA542B;
float: left;
min-height: 65px;
padding-bottom: 4px;
padding-top: 4px;
position: relative;
text-shadow: 1px 1px 1px #000000;
width: 70px;
z-index: 2;}.wrap{border-radius: 0 0 0 5px;
bottom: 0;
left: 0;
margin: 0;
padding-right: 1px;
position: absolute;
top: 0;
width: 70px;
z-index: 1;}
Wtrite your html
<div class="wrapper" style="position:realtive;border:1px solid red;">
<div class="wrap"></div>
<div calss="aProductHeader">xxxxx</div><div class="aProduct">xxx</div>
</div>
無需編寫Javascript / jQuery,您可以通過CSS來實現。
它將很靈活,並保持兩個div高度相同。
這是代碼:
HTML:
<div class="main">
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
</div>
CSS:
.main { position:relative; display:table;}
.aProductHeader .omschrijving {
background: #cac;
min-height: 30px;
float:left;
width:150px;
position:absolute; left:0; top:0; bottom:0;
}
.aProduct .omschrijving {
background: #cec;
min-height: 30px;
float:left;
width:200px;
margin-left:160px;
}
請享用 !!!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.