1

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

这是我在表格设置中的一种示例：http: //jsfiddle.net/vxgqE/2/

这是一个 div 设置：http: //jsfiddle.net/G3bNh/

我已经设法使用 float: left 和 position: relative 属性正确对齐 DIV，但我发现的问题是当右单元格（参见上面的链接）的高度增长时，左单元格会增长 - 这不会在 div 设置中发生类似情况。

如何确保这两个中间单元始终保持相同的高度？

我知道那里有大量的 JavaScript 和 jQuery 解决方案......但是有没有纯 HTML/CSS 解决方案？

感谢您的投入，非常感谢。

在此处输入图像描述 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>
4

1 回答 1

1

经过一天的修修补补，我自己弄清楚了……我不敢相信花了这么长时间。

解决方案是使用 left:-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-28T22:31:19.443 回答