因此,我有此显示,用于纵向定向视图:

<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彼此顶部都显示全角。那很好。

现在,当方向为横向时,鉴于此css,我想将该中间div左移,将另外两个div右移(仅适用于横向):

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的情况下实现此目标,否则HTML会破坏纵向设计。

最佳答案

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>

关于html - 将通用滚动应用于所有“float:right”元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28516801/

10-12 00:07
查看更多