0

我有一个容器，设置为overflow-x: hidden;，其中包含一系列行。行被分成两列。随着右列的内容发生变化，左列需要能够增长和缩小。布局如下所示：

<div class="no-x-overflow">
  <div class="data-row container-fluid">
    <div class="left-column pull-left">
      <a href="#"></a>
    </div>
    <div class="right-column pull-left">
      <div class="detail-row1"></div>
      <div class="detail-row2"></div>
      <div class="detail-row3"></div>
    </div>
  </div>
</div>

各种detail-rowdiv 可以在 UI 中隐藏和显示，从而data-row缩小和扩展。left-columndiv 需要能够做同样的事情。我可以height为各个部分赋予什么价值，以使它们发挥作用。

款式：

.no-x-overflow {
  overflow-x: hidden;
}

.data-row {
  overflow: hidden;
  clear: both;
}

.left-column {
  width: 10%;
  height: 100%;
  padding: 10px;
  border-right: 1px solid #999;
}

.right-column {
  width: 90%;
}
4

1 回答 1

0

如果没有上下文说明为什么左列需要增长和缩小以匹配右列，这个问题很难回答。例如，如果我试图为左列提供与右列高度匹配的背景颜色或边框，我只需将该背景颜色赋予容器，然后在右列上应用不同的背景。这是我正在谈论的内容的小提琴。http://jsfiddle.net/BY2Xh/1/

.data-row {
overflow: auto;
width: 100%;
position: relative;
background: yellow;
}

.left-column {
width: 10%;
box-shadow: 1px 0 0 solid #999;
float: left;
}  

.right-column {
width: 90%;
box-shadow: 0 0 0 1px red;
float: left;
background: green;
}

如果您的问题是您在此内容之后有浮动元素，并且不希望它们填充由较短的左列创建的空白空间，那么您也可以将宽度和 oveflow: auto 应用于容器。

此外，如果您的宽度 %s 加起来为 100 并且您还有边框或填充，则您的布局将无法按预期工作。您需要从那些内部 div 中删除填充，并且可以使用框阴影应用不占用 DOM 空间的边框。

于 2013-01-25T13:22:42.953 回答