更改父DIV在兒童的身高變化

我一直在探索這個小時無濟於事。我基本上將我的網站從過時的表格設置轉換爲div設置。更改父DIV在兒童的身高變化

這裏是什麼樣的事情，我曾在一個表中建立的樣本： http://jsfiddle.net/vxgqE/2/

我已經成功地對齊DIV正確使用float：left和position：relative屬性，但是我發現的問題是，當右側單元格（見上面的鏈接）高度增長時，左側單元格會增長 - 這種情況在類似情況下不會發生一個div設置。

我怎樣才能確保這兩個中間細胞總是保持相同的高度？

我知道有大量JavaScript和jQuery解決方案在那裏......但是有沒有任何純粹的HTML/CSS解決方案？

感謝您的意見，我們非常感謝。

enter image description here HTML代碼：

<table> 
    <tr> 
     <td class="top"> 
      <!-- image1 !--> 
     </td> 
    </tr> 
    <tr> 
     <td class="mid1"> 
      <p> 
       exrc fdbodf nosdf ifd onsdfo nj dfnsn a fnl mfasn saf 
      </p> 
     </td> 
     <td class="mid2"> 
      <p> 
       exrc fdbodf nosdf ifd onsdfo nj dfnsn a fnl mfasn saf 
      </p> 
     </td> 
    </tr> 
    <tr> 
     <td class="bot"> 
      <!-- image2 !-->    
     </td> 
    </tr> 
</table>

股利代碼：

<html> 
<head> 


<style type="text/css"> 
div {border: 1px solid;} 

#arrowItem { 
position: absolute; 
float: left; 
width: 100%; 
} 


#arrowItem-ArrowTop { 
background-image: url('img/About-Process_ArrowsTop.png'); 
height: 70px; 
width: 300px; 
} 

#arrowItem-ArrowCenter { 
position: absolute; 


} 

#arrowItem-ArrowBot { 
background-image: url('img/About-Process_ArrowsBot.png'); 
height: 70px; 
width: 300px; 
} 

#arrowItem-RightText { 
position: absolute; 
float: left; 
position: relative; 
width: 600px; 

} 

#arrowItem-text1 { 
position: relative; 
float: left; 
width: 300px; 
background-color: #d4e0a9; 
border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
} 

#arrowItem-text2 { 
position: relative; 
float: left; 
width: 300px; 
} 

</style> 

</head> 
<body> 




<div id="arrowItem"> 
<div id="arrowItem-ArrowTop"> 
</div> 
<div id="arrowItem-ArrowCenter"> 
    <div id="arrowItem-text1"> 
    <p> 
    1234567812345678 
    </p> 
    </div> 
    <div id="arrowItem-text2"> 
    <p> 
    23456723456789 
    </p> 
    </div> 
</div> 
<div id="arrowItem-ArrowBot"> 
</div> 
</div>

來源

2012-11-28 kirgy

您的非表代碼在哪裏？這就是我們需要處理的東西:) –

我在那裏爲你添加了一個鏈接：http://jsfiddle.net/G3bNh/ – kirgy

後實際上是一種修修補補的一天，我已經想通了自己......我無法相信花了這麼長時間。

解決方案是使用左側：-300負屬性以及負邊距屬性的情況下謹慎地放置div的情侶。我的具體項目的完整代碼如下：

<html> 
<head> 


<style type="text/css"> 
div {border: 0px;} 

#arrowItem { 
position: relative; 
float: left; 
width: 100%; 
} 


#arrowItem-ArrowTop { 
position: relative; 
background-image: url('img/About-Process_ArrowsTop.png'); 
height: 70px; 
width: 300px; 
} 


#arrowItem-ArrowBot { 
position: relative; 
background-image: url('img/About-Process_ArrowsBot.png'); 
height: 70px; 
width: 300px; 
left: -300px; 
top: +70px; 
margin-top: -70; 
} 

#arrowItem-RightText { 
position: absolute; 
float: left; 
position: relative; 
width: 600px; 

} 



#arrowItem-text1 { 
position: relative; 
left: 300px; 
width: 500px; 
} 

#arrowItem-text2 { 
position: relative; 
top: -100px; 
width: 300px; 
height: 100px; 
background-color: #d4e0a9; 
border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
} 

#test1 { 
position: absolute; 
top: 0px; 
left: -300px; 
width: 300px; 
padding: 0px; 
margin: 0px; 
height: 100%; 

border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
} 
</style> 

</head> 
<body> 




<div id="arrowItem"> 
<div id="arrowItem-ArrowTop"> 
</div> 

<div id="arrowItem-ArrowCenter"> 
    <div id="arrowItem-text1"> 
    <p> 
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
    </p> 
    <div id="test1"> 
    ddd 
    </div> 
    <div id="arrowItem-ArrowBot"> 
    </div> 
    </div> 


</div> 

</div> 
</html>

來源

2012-11-28 22:31:19 kirgy

更改父DIV在兒童的身高變化

回答

相關問題