在纵向模式下展开,仅使用CSS在横向模式下折叠

时间:2016-08-08 05:48:44

标签: ios css css-float landscape-portrait

我有这段代码:

<div class="wrapper">
 <div class="left">content left</div>
 <div class="right">content right</div>
</div>

我的目标是让内部的两个div扩展100%以覆盖整个宽度,当iphone处于纵向模式时,但在横向模式下折叠到50%,因此它们都适合同一行。这是我的css:

.wrapper {width:100%;height:auto;}

.left, .right {float:left;width:auto;}

它无效。你是怎么做到的?

1 个答案:

答案 0 :(得分:0)

您需要的是用于屏幕方向的媒体查询。请参阅MDN

/* assume portrait mode; everything set to the default */
.wrapper {width:100%;height:auto;}
.left, .right {width:auto;}

/* in landscape mode however, display left and right side by side */
@media all and (orientation: landscape) {
  .left, .right {float:left; width:50%;}
}
<div class="wrapper">
 <div class="left">content left</div>
 <div class="right">content right</div>
</div>