Question

我有一个网站，我想扩展到更适用于平板电脑和手机。我在HTML

中使用带有媒体选择器的样式表

我的HTML就像这样

  <div id="page">
    <div id='header'> ... </div>
    <div id='navigation'> ... </nav>
    <div id='content'> ... </div>
    <div id='footer'> ... </div>
  </div>

我的桌面布局就像这样

┌───────────────────#page──────────────────────┐
│ ┌──────────────────────────────────────────┐ │
│ │ header                                   │ │
│ └──────────────────────────────────────────┘ │
│ ┌──────. ┌─────────────────────────────────┐ │
│ │nav   │ │ content                         │ │
: :      : :                                 : :
│ │      │ │                                 │ │
│ └──────┘ │                                 │ │
│          └─────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │footer                                    │ │
│ └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘

我的desktop.css向左移动#navigation并设置宽度＆amp;左边距 #content以明确#navigation。这是一个固定宽度的布局 - #page具有固定的width:55em和margin: 2em auto，因此它在窗口中保持居中。到目前为止一切都很好。

我希望我的手机布局如下所示，#navigation和#content之间重新定位#footer。

┌───────────#page──────────────┐
│ ┌──────────────────────────┐ │
│ │header                    │ │
│ └──────────────────────────┘ │
│ ┌──────────────────────────┐ │
│ │content                   │ │
: :                          : :
│ │                          │ │
│ └──────────────────────────┘ │
│ ┌──────────────────────────┐ │
│ │navigation                │ │
│ └──────────────────────────┘ │
│ ┌──────────────────────────┐ │
│ │footer                    │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘

我希望这是一个更流畅的布局，当用户调整窗口大小（或适合各种大小的手机屏幕等）时，可以很好地解决问题。

我尝试了#navigation的绝对定位，但它没有滚动底部以获取长内容。内容在页面之间是可变的（obvs）。

我显然可以改变HTML中div的顺序，但我想知道是否可以对CSS中的分区进行重新排序（如当前的手机）。

`desktop.css`

的最小代码段

（在评论中添加以下请求）

＆＃13;

body { 
  font-family: Arial, Helvetica, sans-serif; 
  background: grey;
}

#page {
  background: lightgrey;
  width: 55em;
  margin: 2em auto;
}

#header, #navigation, #content, #footer {
  background: white;
  padding: 0.7em;
}
#navigation, #content, #footer {
  margin-top: 1.5em;
}

#header { 
  font-size: 3em; 
  font-weight: bold; 
  color: green;
}

#navigation {
  float:left;
  width: 18%; 
}
#navigation ul {
  list-style: none;
  padding-left: 0;
}

#content {
  width: 70%;
  margin-left: 24%
}
#content td:first-child {
  white-space: nowrap;
  font-weight: bold;
  text-align: right;
}
#content td {
  padding: 0 0.5em 0.2em 0;
  vertical-align: top;
}

#footer {
  text-align: right;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>layout & font-size tests</title>
  </head>
  <body>
    <div id="page">
  
      <div id="header">
        Site Name
      </div>

      <div id="navigation">
        <ul>
          <li>Here</li>
          <li>There</li>
          <li>Somewhere</li>
          <li>Elsewhere</li>
          <li>Hither</li>
          <li>Thither</li>
          <li>Yon</li>
          <li>Beyond</li>
        </ul>
      </div>

      <div id="content">
        <h1>Welcome to Site Name!</h1>
        <h2>Diary</h2>
        <table class="calendar">
          <tr><td>Jun 18 2015</td><td>18:30</td><td>Lorem ipsum dolor sit amet</td></tr>
          <tr><td>Jul 01 2015</td><td>09:00</td><td>consectetur adipisicing elit</td></tr>
          <tr><td>Aug 09 2015</td><td>18:00</td>
              <td>sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. Ut enim ad minim veniam, quis nostrud   
                  exercitation exercitation ullamco laboris nisi ut aliquip</td></tr>
        </table>
        <h2>Lorem ipsum</h2>
        <p>
          dolor sit amet,  consectetur adipisicing      
          elit, sed do eiusmod tempor incididunt ut labore et dolore 
          magna aliqua. Ut enim ad minim veniam, quis nostrud   
          exercitation exercitation ullamco laboris nisi ut aliquip 
          ex ea commodo consequat. Duis aute irure dolor  
          in reprehenderit in voluptate velit esse cillium dolore 
          eu fugiat nulla pariatur.
        </p>
        <h2>Lorem ipsum</h2>
        <p>
          dolor sit amet,  consectetur adipisicing      
          elit, sed do eiusmod tempor incididunt ut labore et dolore 
          magna aliqua. Ut enim ad minim veniam, quis nostrud   
          exercitation exercitation ullamco laboris nisi ut aliquip 
          ex ea commodo consequat. Duis aute irure dolor  
          in reprehenderit in voluptate velit esse cillium dolore 
          eu fugiat nulla pariatur.
        </p>
      </div> <!-- #content -->

      <div id="footer">
         &copy; Copyright RGB 2015
      </div>

    </div> <!-- #page -->

  </body>
</html>

＆＃13;

`phone.css`

的最小代码段

根据answer的Michael Kampmann Rasm。但是，我无法让内部div填充div#page的宽度。

＆＃13;

body { 
  font-family: Arial, Helvetica, sans-serif; 
  background: grey;
}

#page {
  background: lightgrey;
  margin: 2em auto;

  //display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  /* optional */
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;

}

#header, #navigation, #content, #footer {
  background: white;
  padding: 0.7em;
}
#navigation, #content, #footer {
  margin-top: 1.5em;
}

#header { 
  font-size: 3em; 
  font-weight: bold; 
  color: red;
  //width: 87.3%;

  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;

}

#navigation {
  // width: 95.8%;
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}
#navigation ul {
  list-style: none;
  padding-left: 0;
}
#navigation li {
  display:inline;
}

#content {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;

}
#content td:first-child {
  white-space: nowrap;
  font-weight: bold;
  text-align: right;
}
#content td {
  padding: 0 0.5em 0.2em 0;
  vertical-align: top;
}

#footer {
  //width: 95.8%;
  -webkit-box-ordinal-group: 4;
  -moz-box-ordinal-group: 4;
  -ms-flex-order: 4;
  -webkit-order: 4;
  order: 4;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>layout & font-size tests</title>
  </head>
  <body>
    <div id="page">
  
      <div id="header">
        Site Name
      </div>

      <div id="navigation">
        <ul>
          <li>Here</li>
          <li>There</li>
          <li>Somewhere</li>
          <li>Elsewhere</li>
          <li>Hither</li>
          <li>Thither</li>
          <li>Yon</li>
          <li>Beyond</li>
        </ul>
      </div>

      <div id="content">
        <h1>Welcome to Site Name!</h1>
        <h2>Diary</h2>
        <table class="calendar">
          <tr><td>Jun 18 2015</td><td>18:30</td><td>Lorem ipsum dolor sit amet</td></tr>
          <tr><td>Jul 01 2015</td><td>09:00</td><td>consectetur adipisicing elit</td></tr>
          <tr><td>Aug 09 2015</td><td>18:00</td>
              <td>sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. Ut enim ad minim veniam, quis nostrud   
                  exercitation exercitation ullamco laboris nisi ut aliquip</td></tr>
        </table>
        <h2>Lorem ipsum</h2>
        <p>
          dolor sit amet,  consectetur adipisicing      
          elit, sed do eiusmod tempor incididunt ut labore et dolore 
          magna aliqua. Ut enim ad minim veniam, quis nostrud   
          exercitation exercitation ullamco laboris nisi ut aliquip 
          ex ea commodo consequat. Duis aute irure dolor  
          in reprehenderit in voluptate velit esse cillium dolore 
          eu fugiat nulla pariatur.
        </p>
        <h2>Lorem ipsum</h2>
        <p>
          dolor sit amet,  consectetur adipisicing      
          elit, sed do eiusmod tempor incididunt ut labore et dolore 
          magna aliqua. Ut enim ad minim veniam, quis nostrud   
          exercitation exercitation ullamco laboris nisi ut aliquip 
          ex ea commodo consequat. Duis aute irure dolor  
          in reprehenderit in voluptate velit esse cillium dolore 
          eu fugiat nulla pariatur.
        </p>
      </div> <!-- #content -->

      <div id="footer">
         &copy; Copyright RGB 2015
      </div>

    </div> <!-- #page -->

  </body>
</html>

＆＃13;

Answer 1

这件事很简单，你必须考虑正常的HTML浮动。我假设你使用的HTML代码如下：

<div class="nav"></div>
<div class="content"></div>

使用这样的CSS：

.nav {float: left;}
.content {float: right;}

因此， HTML normal float会使你的.nav元素在.content元素之前（因为它在DOM之前出现）。

所以，简单地说：

<div class="content"></div>
<div class="nav"></div>

并使用相同的CSS（设置.nav向左浮动，.content向右浮动）。

然后，在移动断点上，将它们都设置为float: none;

要使用纯CSS实现这一目标，您可以使用Flexbox ，但必须考虑其实现：http://caniuse.com/#feat=flexbox（IE10 +）

Answer 2

这应该这样做

@media only screen and (min-width : 320px) and (max-width : 767px){
     #page {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            /* optional */
            -webkit-box-align: start;
            -moz-box-align: start;
            -ms-flex-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
     }
     #header {
            -webkit-box-ordinal-group: 1;
            -moz-box-ordinal-group: 1;
            -ms-flex-order: 1;
            -webkit-order: 1;
            order: 1;
     }
     #content {
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
            -ms-flex-order: 2;
            -webkit-order: 2;
            order: 2;
     }
     #navigation {
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
            -ms-flex-order: 3;
            -webkit-order: 3;
            order: 3;
     }
     #footer {
            -webkit-box-ordinal-group: 4;
            -moz-box-ordinal-group: 4;
            -ms-flex-order: 4;
            -webkit-order: 4;
            order: 4;
     }
}

使用CSS重新排序分割元素

`desktop.css`

`phone.css`

2 个答案: