javascript - CSS 3 行布局,中间一排向右

标签 javascript html css

<分区>


我正在为移动设备开发布局。我有 3 个街区。第一和第三 block 有一些文本字段,第二 block 由 map 填充。当它们非常宽时,我所有的 block 看起来都不好看。浏览器窗口可以有两种方向:书籍和相册。我想在方向为相册时更改 block 位置。那么,让我展示一下我如何看待这两个方向的 block 行为。

书籍方向:

+------------+
|   First    |
+------------+
|            |
|   Second   |
|            |
+------------+
|   Third    |
+------------+

HTML:

<div>First</div>
<div>Second</div>
<div>Third</div>

专辑方向:

+------------+-------------+
|   First    |             |
+------------+    Second   |
|   Third    |             |
+------------+-------------+

我该怎么做?
提前致谢!

最佳答案

怎么样

HTML:

<div>First</div>
<div class="right">Second</div>
<div>Third</div>

CSS:

@media all and (orientation: landscape) {
  div {
    width:50%;
    float:left;
  }
  .right {
     float: right;
  }
}

关于javascript - CSS 3 行布局,中间一排向右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26545043/

相关文章:

javascript - React - 安装 react 表

javascript - React-Native:通过 FlatList 选择传递数据

javascript - 字体很棒 5 : icon not switching when condition changes

javascript - 有没有办法一次性在所有页面中包含一个 &lt;script&gt; 或 <link> ?

javascript - 使用 Javascript 向下移动图像

css - 如何制作 Bootstrap 输入字段 "transparent"

javascript - pdfMake - open() 和 print() 函数不工作

javascript - onyx.DatePicker 中断 enyo.Repeater

html - 如何在大屏幕上的 Bootstrap 中堆叠两列

html - 如何在 WordPress 中创建打字效果