Question

我喜欢左框增长，因为右边的内容会扩展整个包装...我的意思是垂直缩放....不是水平的！

我确定这只是某个地方的css礼仪问题......你能帮忙吗？

Answer 1

您可能正在寻找“流畅的列布局”（谷歌那个），您可以通过安排这样的标记来实现这一目标：

<ul style="float:left; width:35%;">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>
</ul>
<div style="float:left; width:65%;">
  <p>Lots of content goes here</p>
</div>

随着整个页面的宽度增加（例如通过调整浏览器的大小），两个“列”都会拉伸以满足35％和65％的宽度要求。以上是一个快速示例标记，它没有考虑Internet Explorer，元素上的默认填充/边距或浮动间隙，理想情况下，两列上的任何样式都将通过“类”设置，即; <div class="column-a">，以及外部CSS文件中定义的所有类。

如果您要我详细说明，请告诉我。

编辑：好的，所以你想让左栏的背景颜色拉伸到底部，给出“等高柱”的视觉效果？如果是这种情况this link is great，应该涵盖您需要了解和尝试的所有内容。

Answer 2

尽量避免浮动，浮动图像和文本。人们经常使用花车，绝对定位更合适。

基本上，您所做的是在右侧窗格中添加一个与左侧窗格一样宽的边距。然后将左窗格绝对定位在右窗格顶部，并将高度设置为100％，使其与容器一样高。容器的高度与内容相同。

以下是您的样本：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      body { width: 800px; margin: 0px auto; position: relative; }

      #nav { 
        width: 200px; height: 100%; 
        position: absolute; left: 0px; top 0px; 
        background: #F00; 
      }

      #content { 
        margin: 0px 0px 0px 200px; 
        heigth: 1000px;
        background: #0F0; 
      }
    </style>
  </head>
  <body>
    <div id="nav">
    </div>
    <div id="content">
    </div>
  </body>
</html>

成长的盒子不工作

2 个答案: