0

我仍然很难理解我的 div。我正在尝试制作一个根据浏览器/屏幕尺寸更改其尺寸的网站。

我已经做到了这一点：

我的html：

<div id="wrapper">
  <div id="header">Header</div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="footer">Footer</div>
</div>

我的CSS：

#wrapper{width: 60%;}

#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left;  width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}

现在我的 div 大小正好合适，问题是连接总是在 div 的底部，但我需要它像普通的 div 一样，所以我可以用它做任何我想做的事情。像普通 div 一样使用它的最简单方法是什么？

感谢您的任何帮助！:)

编辑：这是它的样子： http: //jsfiddle.net/rswML/ ...正如我所说的，问题是文本总是在 div 的底部。我理解它是因为 padding-top 但我需要它来保持高度与宽度的比率并且仍然正常使用 div。

4

3 回答 3

0

您在这里尝试的是响应式设计概念。我建议您为此尝试引导框架。与其自己做所有事情，不如通过简单地向 div 添加一个类来完成所有事情。

响应式网页设计 (RWD) 是一种网页设计方法，旨在打造网站以提供最佳的查看体验——轻松阅读和导航，只需最少的调整大小、平移和滚动——在各种设备上

于 2013-03-24T04:40:54.073 回答
0

我认为问题可能与您的填充值有关。也许调整它们将使您拥有所需的控制权，或者边缘顶部会更好。此外，不确定您是否希望对齐元素 #left 和 #right 的顶部，但这些填充设置可能会以不同的值呈现。带有百分比的 padding-top 属性引用包含块的宽度。希望有帮助。干杯。

于 2013-03-24T06:00:15.730 回答
0

解决方案是我必须使标题 div 位置：相对，然后在其中创建另一个 div，即位置：绝对和宽度/高度：100%。

于 2013-03-24T14:41:58.990 回答