Question

我一直在探索这几个小时无济于事。我基本上是将我的网站从过时的表格设置转换为div-setup。

以下是我在表格设置中所拥有的一种示例： http://jsfiddle.net/vxgqE/2/

我设法使用float：left和position：relative属性正确对齐DIV，但我发现的问题是当正确的单元格（见上面的链接）高度增长时，左边的单元格会增长 - 这个在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>

Div代码：

<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>

Answer 1

经过一天的修修补补之后，我已经把它弄清楚了......我不敢相信花了这么长时间。

解决方案是使用左侧：-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>

在孩子的身高变化时改变父DIV

1 个答案: