ipad，css方向从纵向切换为3列到2

Question

很抱歉在这里发布此内容，但在我的网站中切换到纵向时遇到了ipad问题。

使用@media查询来检测肖像，我想从三列切换到两列。问题是，当前在左列中的div具有动态内容，它扩展了它的高度并重叠在我从右侧向左侧翻转的div下面。

我知道新定位的右侧div正在掩盖扩展内容，因为我已将其设置为“position：absolute”。想知道是否有人遇到过这个问题并且有一个快速的修复。

以下是我想要填充左侧的两个css元素：

#main_wrapper #agenda_wrapper {
  width:23%;
  left: 5px;
  top: 2px;
}
#main_wrapper #summary_wrapper {
  float:left;
  position:absolute;
  left: 5px;
  top: 280px;
  width: 23%;
}

这是html结构：

<div id="wrapper">
  <header id="pageHeader">
  <div id="main_wrapper">
    <div id="agenda_wrapper"></div>
    <div class="main"></div>
    <div id="summary_wrapper"></div>
  </div>
 <footer>
</div>

Answer 1

很难想象没有HTML结构的解决方案，但我会尝试。

我认为这是你想要的：

1. 您正在iPad上以纵向视图切换样式表
2. #agenda_wrapper覆盖了#summary_wrapper
3. #agenda_wrapper根据用户内容具有可变高度。
4. 假设你想要一个CSS解决方案。

这是花车的好地方。绝对定位需要变化定位的元素是没有意义的。

#agenda_wrapper,
#summary_wrapper 
{
  width: 23%;
  float: left;
}

#summary_wrapper {
  clear: left;
}