将通用滚动应用到所有 "float:right" 个元素

Question

所以我有这个显示器，用于纵向视图：

<div id="wrapper">

  <div class="to_right_on_landscape"></div>

  <div class="to_left_on_landscape"></div>

  <div class="to_right_on_landscape"></div>

</div>

在纵向模式下，每个 div 显示全角，彼此重叠。不错。

现在，当方向是横向时，我想把中间的 div 扔到左边，另外两个在右边，鉴于此 css（仅适用于横向）：

html, body, #wrapper {
  height: 100%;
}

.to_left_on_landscape {
  width: 50%;
  height: 100%;
  float: left;
}

.to_right_on_landscape {
  width: 50%;
  float: right;
  overflow: auto; /* was naively hoping this would work */
}

现在我的问题是：当我右边 div 的内容变得太长时，它们会比左边 div 长。我希望这两个 div 有某种共同的 overflow:auto; height:100% 行为，就好像它们在同一个 div 中一样，这将显示一个很好的滚动条来浏览 float:right元素，同时保持 float:left 一个显示在左边，无论右边的文本有多长。

但我不知道如何在不修改 HTML 的情况下实现这一点，这会破坏纵向设计。

Answer 1

Flexbox 是满足您要求的最佳方法。 Flexbox 是 css3 概念，它兼容所有主流浏览器。

您可以在此 link 上检查兼容性。

JSFIDDLE

    <style>
        .container {
          display: flex; /* or inline-flex */
        }
        .item {
          order: 2;
          flex:1;
          text-align:center;
          background-color:#f9f9f9;
          padding:10px;
          border:1px solid #CCC;
          text-align: justify;
          height:200px;
          overflow:auto;
        }

        @media screen and (orientation:portrait) {
            .container{
               flex-flow:column wrap;
            }
        }
        @media screen and (orientation:landscape) {
            .i2{
                order:1;
            }
        }
    </style>

和HTML标记

    <div class="container">
        <div class="item">1</div>
        <div class="item i2">2</div>
        <div class="item">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        </div>
    </div>

Answer 2

决定放弃浮动属性并使用固定头寸和 50% 保证金，如下所示：

html, body, #wrapper {
  height: 100%;
}

#wrapper {
  display: inline;
}

.to_left_on_landscape {
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

.to_right_on_landscape {
  margin-left: 50%;
}

将通用滚动应用到所有 "float:right" 个元素

Apply common scroll to all "float:right" elements

html

css

css-float