Question

我有一个三列布局，第一列以侧栏开始。侧边栏是浮动的：左边。其他两列填充了产品div，它们也是float：left。在侧边栏结束后，附加产品div在第一列中包裹在其下方，因此有三个产品div。

侧边栏是动态创建的，因此长度可变，有时非常长。此外，我将页面设置为通过滚动到页面底部触发的ajax调用添加其他内容。问题是，如果侧边栏比原始的两列产品div更长，当我向页面添加其他内容时，它会从侧边栏下面开始，而不是继续包裹在侧边栏下方的边栏右侧。原创产品div。

这是我的HTML

<div id="rightWideContainer">
   <div id="leftNavCol">
      <!-- sidebar content -->
   </div>

   <div class="threeCol">
      <!-- product content -->
   </div>

   <div class="threeCol">
      <!-- product content -->
   </div>

   <div class="threeCol">
      <!-- product content -->
   </div>

   ...

</div>

和我的CSS

#leftNavCol {
   position: relative;
   width: 270px;
   float: left;
   margin: 7.5px;
}

.threeCol {
   width: 270px;
   margin: 7.5px;
   float: left;
}

在调用ajax后，我使用此JS附加响应

$(response).find('.threeCol').appendTo('#rightWideContainer');

我已经查看了stackoverflow上的问题，但没有看到与此问题直接相关的问题。我尝试隐藏侧边栏，添加内容，然后再次显示侧边栏，但新内容在重新出现时仍然在侧边栏下方。无论如何，这有点像hacky，如果可能的话，我想避免这样的解决方案，但现在我只是在寻找选择。有没有办法让ajax内容继续包装在右边，直到侧边栏结束？

Answer 1

您可以尝试将侧边栏和产品内容分开。此时你将它们放在同一个包装器div（#rightWideContainer）中。为什么不在这个包装器之外放置侧边栏并且#rightWideContainer浮动在侧边栏旁边？



<div id="leftNavCol">
          <!-- sidebar content -->
</div>


<div id="rightWideContainer">

   <div class="threeCol">
      <!-- product content -->
   </div>

   <div class="threeCol">
      <!-- product content -->
   </div>

   <div class="threeCol">
      <!-- product content -->
   </div>

   ...

</div>

然后你的css：

{{1}}

浮动ajax内容不按要求包装

1 个答案: