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”元素

2 个答案: