更改父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在儿童的身高变化

回答

相关问题