Question

我对网站有以下基本标记：

<div class="header"></div>
<div class="content_container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
<div class="footer"></div>

我希望能够定位三个内容div，使它们水平对齐 ，一次只能看到一个，以便我可以在它们之间左右滑动

问题在于，三个div中的每一个都包含不同数量的内容，因此默认情况下具有不同的高度。

是否可以允许div保留其默认高度并仍然强制页脚显示在内容的正下方（无论当前显示哪三个内容div），而不必使用像{{{j}这样的JS属性1}}等等？

我认为使用绝对定位是我想要的唯一方法，但是一旦使用绝对定位，页脚就会一直向上移动到标题下方，因为内容容器div被解释为身高为0。

Answer 1

如果您的“content_container”div在您的网页上正确定位水平，那么您可以在content_container上添加一个浮动并清除页脚上的浮动，以使其始终位于您的content_container下方。

.content_container {
  float: left;
}

.footer {
  clear: both;
}

更新：您可以使用完整标记和CSS： jsFiddle 。我用颜色来显示不同div的位置。

Answer 2

演示http://jsfiddle.net/ZRE3s/

jquery片段仅用于演示，我根本不熟练使用javascript。但是，当单击一列时，该片段基本上会向容器添加一个类。

标记类似于你的标记，除了我使用自己的类名，但它足够直观。

<div class='container'>
    <div class='col-1'></div>
    <div class='col-2'></div>
    <div class='col-3'></div>
</div>    
<div class='footer'>Footer</div>

列最初的max-height为0（您可以使用height，但我使用max-height，否则CSS过渡不会设置动画高度）。列的宽度为100％，因此它们占据容器的宽度。然后，他们会display: inline-block水平设置，而容器的white-space设置为nowrap。容器也有overflow: hidden，因此我们不会获得水平滚动条。因此，只有活动列具有高度，其他列将被折叠。

基本上，除活动列之外的每个列都没有高度，并且由于容器具有height: auto;，因此它将占用活动列的高度。

我觉得我在这里徘徊，我希望你能理解这个要点。

是否可以在不设置高度的情况下绝对定位内容？

2 个答案: