Javascript CSS 3行布局，中间一行向右

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

图书定位：

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

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

HTML:

我该怎么做？
提前谢谢

怎么样

HTML:

---

如果您使用的是表，则可以将其放入div“div1”中，并使用以下jQuery事件：

$( window ).on( "orientationchange", function( event ) {
    if(event.orientation=="portrait") {
       $( "#div1" ).html("<table border="1"> <tr><td>First</td></tr> <tr><td>Second</td></tr> <tr><td>Third</td></tr></table>");
    }
    else if(event.orientation=="landscape") {
        $( "#div1" ).html("<table border="1"> <tr><td>First</td><td rowspan="2">Second</td></tr> <tr><td>Third</td></tr></table>");
    }
});

第二种情况是：

<table border="1">
   <tr>
       <td>First</td>
       <td rowspan="2">Second</td>
   </tr>
   <tr>
       <td>Third</td>
   </tr>
</table>

---

你的代码在哪里？到目前为止，您尝试了什么？我建议您查看一下纯css yahoo项目，并查看其网格部分。第一种配置是默认配置，第二种配置可以使用浮动实现。回答得很好！非常感谢，@alienlebarge！这就是我需要的。

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

$( window ).on( "orientationchange", function( event ) {
    if(event.orientation=="portrait") {
       $( "#div1" ).html("<table border="1"> <tr><td>First</td></tr> <tr><td>Second</td></tr> <tr><td>Third</td></tr></table>");
    }
    else if(event.orientation=="landscape") {
        $( "#div1" ).html("<table border="1"> <tr><td>First</td><td rowspan="2">Second</td></tr> <tr><td>Third</td></tr></table>");
    }
});

<table border="1">
   <tr>
       <td>First</td>
   </tr>
   <tr>
       <td>Second</td>
   </tr>
   <tr>
       <td>Third</td>
   </tr>
</table>

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

<table border="1">
   <tr>
       <td>First</td>
       <td rowspan="2">Second</td>
   </tr>
   <tr>
       <td>Third</td>
   </tr>
</table>

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