需要帮助格式化HTML页面布局 | 需要帮助格式化HTML页面布局

本文介绍了需要帮助格式化HTML页面布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个网页，我想使用以下格式：

我遇到问题，页面导航正确定位。它需要始终低于数据列。它目前包装在左栏下面。它应该有一个边框，但边框出现在页面顶部附近。最后，页脚出现在页面的顶部，而不是底部。我已经玩了一天了，无法弄清我在哪里犯了错误。

代码的缩减版本在这里：

  .h2b {/ * page title * / font-size：17.5pt;颜色：＃469; font-family：Arial，Helvetica，sans-serif; font-weight：bold;}。a {color：＃469; text-decoration：none;} body {color：＃000; font-family：Arial，Helvetica，sans-serif; font-size：small; font-style：normal; background-color：#fff;}＃container {width：100％; margin：0; background-color：#fff;位置：相对; padding：0;}＃masthead {text-align：right; width：100％; background-color：＃c5d5e5; / * width：auto; * / margin：0; padding：0; overflow：auto;}＃page_content {position：relative;宽度：96％; / * width：98％; * / / * border-top-width：1px; border-top-style：solid; border-top-color：＃CCAA77; * / left：20px;}＃major_revision {/ * position：relative; left：20px; * /}＃footer {background-color：#dfcfbf; padding-bottom：5px; width：auto;清除： overflow：auto;}＃masthead img {float：left; margin：0; padding：0;}＃masthead p {font-size：small; text-align：right; color：＃000; margin：0 0 0 0; padding：0;} / *导航通用的样式修改10-16-2015 * /＃navigationcommon {background-color：＃548EBE; overflow：hidden; border-bottom：thin black solid;}＃navigationcommon ul {list-style-type：none; width：100％; margin：0; padding：0;}＃navigationcommon li {float：left;}＃navigationcommon a {color：#FFF; text-decoration：none;显示：block; padding：5px; border：1px solid＃D3D3D3; background-color：＃548EBE;}＃navigationcommon a：hover {color：＃000; text-decoration：none; border：1px solid＃D3D3D3; background-color：＃ADD8E6;} / * Footer的样式* /＃footer p {font-size：x-small; text-align：center;颜色：＃393939; margin：10px; padding：1px;}＃footer a {color：＃393939; text-decoration：underline;}＃footer a：hover {color：＃000; text-decoration：none;}

 <！DOCTYPE html> ;< html>< head> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> < meta charset =UTF-8> < title> PAGE< / title>< / head>< body> <！ -  Begin Container  - > < div id =container> <！ - 开始标头 - > < header id =mastheadonclick =style =background-color：＃0047ff> < p style =background-color：＃0047ff; height：30px; width：104px> <！ - 查看帮助文件的图像文件路径 - > < / p> < / header> <！ - 结束标头 - > < nav id =navigationcommononclick => < ul> <！ - 查看帮助文件的图像文件路径 - > < li>< a href =＃>首页< / a> < / li> < li>< a href =＃>关于< / a> < / li> < li>< a href =＃>联系人< / a> < / li> < li> < a href =＃onclick =passdata（）; return false> Improve< / a> < / li> < li>< a href =＃> Tailor< / a> < / li> < / ul> < a href =＃style =float：right; font：small-caption; border-style：none; color：white; vertical-align：bottom; margin-bottom：0px; padding-bottom：0px; padding -left：5px; padding-right：5px>高级搜索< / a> <！ - 查看帮助文件的图像文件路径 - > < input type =imagesrc =pill-button-green-clip-art.jpgstyle =width：90px; border-style：none; float：right; height：28px; value =Searchonclick =search（）>& nbsp; & nbsp; & nbsp; < input name =searchtype =textmaxlength =512id =searchclass =searchFieldtitle =style =width：300px; border-style：none; height：26px; float ：right; padding-right：5px;value =Enter Keyword>& nbsp; & nbsp; & nbsp; < / nav> <！ -  Begin Page Content  - > < section id =page_contentstyle =top：60px; onclick => < div id =major_revisionstyle =position：fixed; top：65px; float：left; width：100％; padding：0 1％1％2％;> < p>< span id =areastyle =font-weight：bold>一些数据< / span> < br> < span style =font-size：x-small>主要修订版本：< revision> 1.0< / revision><！ -  Format是主要修订版本：＃。 & nbsp;& nbsp;& nbsp;& nbsp;日期：< date> 7/1/2015< / date>< / span> < / p> <！ - 格式是发布日期：mm / dd / yyyy  - > < / div> <！ - 下面是屏幕顶部的导航按钮。它走到左侧COLUMN< div> - > < div style =position：fixed; top：120px; width：96％; margin：0 0 0 2％; border：thin black solid> <！----> < div style =position：relative; float：left; width：50％; padding：0％0％0％0％; background-color：#CCDDFF> < p style =text-align：left; background-color：transparent; margin：.5％0 .5％1％;> < input style =background-color：#DFCFBFname =previousid =previoustype =buttonvalue =& lt;& lt; Prevonclick =page_navigation（'previous'） class =round/> < br> < span style =padding：0％0％0％0％; margin-left：1％; id =previous_textclass =style_bold>< / span> < / p> < / div> < div style =position：relative; float：right; width：50％; padding：0％0％0％0％; background-color：#CCDDFF> < p style =text-align：right; background-color：transparent; margin：.5％1％.5％0;> < input style =background-color：#DFCFBFname =nextid =nexttype =buttonvalue =Next& gt; onclick =page_navigation（'next'）class =round/> < br> < span style =padding：0％0％0％0％; margin-right：1％; id =next_textclass =style_bold>< / span> < / p> < / div> < / div> <！ - 上面是用于屏幕顶部的导航按钮 - > < div style =position：fixed; top：165px; float：left; width：98％; padding：10px 0％0％2％;> < span class =h1b>页标题< / span> < / div> <！ - 左起列 - > < div style =position：fixed; top：205px; width：95％> < div style =position：relative; float：left; width：70％; padding：0％0％1％2％;> < span class =h2b> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX< / span> < p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< br> < br> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< br> < br> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < br> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx< br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < / p> < span class =h2b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< br> < br> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< br> < br> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < span style =margin：20px;>  -  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < span style =margin：20px;>  -  xxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< / span> < br> < span style =margin：20px;>  -  xxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxx xxxxxxxx< / span> < br> < br> xxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。 < br> < br> xxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx< / p> < / div> <！ - 左端列 - > <！ -  Begin Right Column  - > < div style =position：relative; float：right; width：10％; margin：0 2％0 0> < span class =h2b> xxxxxxx< / span> < p> xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxx< br> < br> xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< br> < br> xxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx< br> < span style =margin：1％;>  -  xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx< / span> < br> < span style =margin：1％;>  -  xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxx xxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxx xxxxxx< / span> < br> < span style =margin：1％;>  -  xxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxx< / span> < br> < span style =margin：1％;>  -  xxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxxxxx xxxxxxx< / span> < br> < br> < / p> <！ -  End Right Column  - > < / div> <！ - 下面是屏幕底部的导航按钮。它在BLEOW右侧列< / div> - > < div style =position：relative; width：100％; margin：0 0 0 2％; border：thin red solid> < div style =position：relative; float：left; width：50％; padding：0％0％0％0％; background-color：#CCDDFF> < p style =text-align：left; background-color：transparent; margin：.5％0 .5％1％;> < input style =background-color：#DFCFBFname =previousid =previous1type =buttonvalue =& lt;& lt; Prevonclick =page_navigation（'previous'） class =round/> < br> < span style =padding：0％0％0％0％; margin-left：1％; id =previous_text1class =style_bold>< / span> < / p> < / div> < div style =position：relative; float：right; width：50％; padding：0％0％0％0％; background-color：#CCDDFF> < p style =text-align：right; background-color：transparent; margin：.5％1％.5％0;> < input style =background-color：#DFCFBFname =nextid =next1type =buttonvalue =Next& gt; onclick =page_navigation（'next'）class =round/> < br> < span style =padding：0％0％0％0％; margin-right：1％; id =next_text1class =style_bold>< / span> < / p> < / div> < / div> <！ - 上面是用于屏幕底部的导航按钮 - > < / div> < / section> <！ -  Begin Footer  - > < div id =footer> < p>版权©保留所有权利。< / p> < / div> <！ -  End Footer  - > < / div> <！ -  End Container  - >< / body>< / html>

$ b

解决方案

看起来像是构建一个复杂的应用程序，通常我使用布局代表的复杂类型的绝对布局：

 < div class =l-masthead>刊头< / div> 
< div class =l-navigation>导航< / div> 
< div class =l-revision>修订版< / div> 
< div class =l-pagenav-top>页面导航顶部< / div> 
< div class =l-data> 
< div class =l-data-con> 
< div class =l-data1> 
< p> 
 Lorum1 
< / p> 
< p> 
 Lorum2 
< / p> 
< p> 
 Lorum1 
< / p> 
< p> 
 Lorum1 
< / p> 
< p> 
 Lorum1 
< / p> 
< / div> 
< div class =l-data2> 
< p> 
 Lorum1 
< / p> 
< p> 
 Lorum2 
< / p> 
< p> 
 Lorum1 
< / p> 
< p> 
 Lorum1 
< / p> 
< p> 
 Lorum1 
< / p> < / div> 
< / div> 
< / div> 
< div class =l-pagenav-bot>页面导航底部< / div> 
< div class =l-footer> Footer< / div> 
 
 
 .l-masthead {width：100％; height：20px top：0; left：0; position：absolute;背景：橙色; } 
 .l-navigation {width：100％; height：20px; top：20px; left：0; position：absolute;背景：绿色; } 
 .l-revision {width：100％; height：20px; top：40px; left：0; position：absolute;背景：石灰; } 
 .l-pagenav-top {width：100％; height：20px; top：60px; left：0; position：absolute;背景：黄色} 
 
 .l-data {width：100％; position：absolute; top：80px; bottom：40px; left：0; } 
 .l-data-con {width：100％;高度：100％;位置：相对; } 
 .l-data1 {padding：20px; overflow-y：auto; position：absolute; top：0;右：50％; bottom：0; left：0;背景：LightBlue; } 
 .l-data2 {padding：20px; overflow-y：auto; position：absolute; top：0; right：0; bottom：0;左：50％;背景：LightCyan; } 
 
 .l-pagenav-bot {width：100％; height：20px; position：absolute;底部：20px; left：0;背景：黄色; } 
 .l-footer {width：100％; height：20px; position：absolute; bottom：0; left：0;背景：橙色; }

之后，这将响应平板电脑形状因素，你要在应用程序中构建，这将没有意义。您必须回到UX，以便通过手机使这样的复杂应用程序工作。

此外，将您的CSS从内联和外部CSS文件。 p>

I have a page that I want to have the following format:

I am having problems getting the lower page navigation positioned properly. It needs to always be below the data columns. It currently wraps below the left column. It is supposed to have a border around it, but the border is appearing near the top of the page. Lastly the footer appears at the top of the page and not the bottom. I've been playing with this for over a day and can't figure out where I made my mistakes.

A stripped down version of the code is here:

.h2b {
  /*page title*/
  font-size: 17.5pt;
  color: #469;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.a {
  color: #469;
  text-decoration: none;
}
body {
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-style: normal;
  background-color: #fff;
}
#container {
  width: 100%;
  margin: 0;
  background-color: #fff;
  position: relative;
  padding: 0;
}
#masthead {
  text-align: right;
  width: 100%;
  background-color: #c5d5e5;
  /*width: auto;*/
  margin: 0;
  padding: 0;
  overflow: auto;
}
#page_content {
  position: relative;
  width: 96%;
  /*width: 98%;*/
  /*border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCAA77;*/
  left: 20px;
}
#major_revision {
  /*position: relative;
	left: 20px;*/
}
#footer {
  background-color: #dfcfbf;
  padding-bottom: 5px;
  width: auto;
  clear: both;
  overflow: auto;
}
#masthead img {
  float: left;
  margin: 0;
  padding: 0;
}
#masthead p {
  font-size: small;
  text-align: right;
  color: #000;
  margin: 0 0 0 0;
  padding: 0;
}
/* Styles for Navigationcommon modified 10-16-2015*/

#navigationcommon {
  background-color: #548EBE;
  overflow: hidden;
  border-bottom: thin black solid;
}
#navigationcommon ul {
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
#navigationcommon li {
  float: left;
}
#navigationcommon a {
  color: #FFF;
  text-decoration: none;
  display: block;
  padding: 5px;
  border: 1px solid #D3D3D3;
  background-color: #548EBE;
}
#navigationcommon a:hover {
  color: #000;
  text-decoration: none;
  border: 1px solid #D3D3D3;
  background-color: #ADD8E6;
}
/* Styles for Footer */

#footer p {
  font-size: x-small;
  text-align: center;
  color: #393939;
  margin: 10px;
  padding: 1px;
}
#footer a {
  color: #393939;
  text-decoration: underline;
}
#footer a:hover {
  color: #000;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="UTF-8">

  <title>PAGE</title>


</head>

<body>

  <!-- Begin Container -->
  <div id="container">

    <!-- Begin Masthead -->
    <header id="masthead" onclick="" style="background-color:#0047ff">
      <p style="background-color:#0047ff;height:30px; width:104px">
        <!--See helper file for paths to image files-->
      </p>
    </header>
    <!-- End Masthead -->
    <nav id="navigationcommon" onclick="">
      <ul>
        <!--See helper file for paths to image files-->
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contacts</a>
        </li>
        <li>
          <a href="#" onclick="passdata(); return false">Improve</a>
        </li>
        <li><a href="#">Tailor</a>
        </li>
      </ul>

      <a href="#" style="float:right;font:small-caption;border-style:none;
		color:white; vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;padding-left:5px;padding-right:5px">Advanced Search</a>
      <!--See helper file for paths to image files-->
      <input type="image" src="pill-button-green-clip-art.jpg" style="width: 90px; border-style:none; float:right; height: 28px;" value="Search" onclick="search()">&nbsp; &nbsp; &nbsp;
      <input name="search" type="text" maxlength="512" id="search" class="searchField" title="" style="width: 300px;
		border-style:none; height: 26px; float:right; padding-right:5px; " value="Enter Keyword">&nbsp; &nbsp; &nbsp;
    </nav>

    <!-- Begin Page Content -->
    <section id="page_content" style="top: 60px;" onclick="">
      <div id="major_revision" style="position:fixed;top: 65px;float:left;width:100%;padding: 0 1% 1% 2%;">
        <p><span id="area" style="font-weight:bold">Some Data</span>
          <br>
          <span style="font-size:x-small">Major Revision: <revision>1.0</revision><!-- Format  is Major Revision: #.# -->
			&nbsp;&nbsp;&nbsp;&nbsp; Date: <date>7/1/2015</date></span>
        </p>
        <!-- Format  is Release Date: mm/dd/yyyy -->
      </div>
      <!-- Below is for the navigation buttons on the top of the screen. It goes ABOVE the LEFT COLUMN <div> -->
      <div style="position:fixed;top: 120px;width:96%;margin:0 0 0 2%;border:thin black solid">

        <!---->
        <div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
          <p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
            <input style="background-color:#DFCFBF" name="previous" id="previous" type="button" value="&lt;&lt; Prev" onclick="page_navigation('previous')" class="round" />
            <br>
            <span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text" class="style_bold"></span>
          </p>
        </div>
        <div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
          <p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
            <input style="background-color:#DFCFBF" name="next" id="next" type="button" value="Next &gt;&gt;" onclick="page_navigation('next')" class="round" />
            <br>
            <span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text" class="style_bold"></span>
          </p>
        </div>

      </div>
      <!-- Above is for the navigation buttons on the top of the screen -->

      <div style="position:fixed;top: 165px;float:left;width:98%;padding: 10px 0% 0% 2%;">
        <span class="h1b">Page Title
			</span>
      </div>

      <!-- Begin Left Column -->
      <div style="position:fixed;top: 205px;width:95%">
        <div style="position:relative;float:left;width:70%;padding: 0% 0% 1% 2%;">

          <span class="h2b">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
          <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            <br>
            <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            <br>
            <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            <br>

            <span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx</span>
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            <br>
            <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx</span>
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
          </p>

          <span class="h2b">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
          <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx
            <br>
            <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            <br>
            <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            <br>
            <span style="margin:20px;">- xxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            <br>
            <span style="margin:20px;">- xxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxx xxxxxxxx</span>
            <br>
            <br>xxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx.
            <br>
            <br>xxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx</p>

        </div>
        <!-- End Left Column -->
        <!-- Begin Right Column -->
        <div style="position:relative;float:right;width:10%;margin:0 2% 0 0">
          <span class="h2b">xxxxxxx </span>
          <p>xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxx
            <br>
            <br>xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
            <br>
            <br>xxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
            <br>

            <span style="margin:1%;">- xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx</span>
            <br>
            <span style="margin:1%;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxx xxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxx xxxxxx</span>
            <br>
            <span style="margin:1%;">- xxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxx</span>
            <br>
            <span style="margin:1%;">- xxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxxxxx xxxxxxx</span>
            <br>
            <br>

          </p>


          <!-- End Right Column -->
        </div>

        <!-- Below is for the navigation buttons on the bottom of the screen. It goes BELOW the RIGHT COLUMN </div> -->
        <div style="position:relative;width:100%;margin:0 0 0 2%;border:thin red solid">
          <div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
            <p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
              <input style="background-color:#DFCFBF" name="previous" id="previous1" type="button" value="&lt;&lt; Prev" onclick="page_navigation('previous')" class="round" />
              <br>
              <span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text1" class="style_bold"></span>
            </p>
          </div>
          <div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
            <p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
              <input style="background-color:#DFCFBF" name="next" id="next1" type="button" value="Next &gt;&gt;" onclick="page_navigation('next')" class="round" />
              <br>
              <span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text1" class="style_bold"></span>
            </p>
          </div>

        </div>
        <!-- Above is for the navigation buttons on the bottom of the screen -->
      </div>

    </section>
    <!-- Begin Footer -->
    <div id="footer">
      <p>Copyright &copy; All Rights Reserved.</p>
    </div>
    <!-- End Footer -->

  </div>
  <!-- End Container -->

</body>

</html>

解决方案

Looks like your building a complicated app, generally I use absolute layouts for the type of complexity that your layout represents:

http://codepen.io/anon/pen/BomePJ

<div class="l-masthead">Masthead</div>
<div class="l-navigation">Navigation</div>
<div class="l-revision">Revision</div>
<div class="l-pagenav-top">Page Navigation Top</div>
<div class="l-data">
  <div class="l-data-con">
    <div class="l-data1">
      <p>
        Lorum1
      </p>
      <p>
        Lorum2
      </p>
      <p>
        Lorum1
      </p>
      <p>
        Lorum1
      </p>
      <p>
        Lorum1
      </p>
    </div>
    <div class="l-data2">
      <p>
        Lorum1
      </p>
      <p>
        Lorum2
      </p>
      <p>
        Lorum1
      </p>
      <p>
        Lorum1
      </p>
      <p>
        Lorum1
      </p>     </div>
   </div>
</div>
<div class="l-pagenav-bot">Page Navigation Bottom</div>
<div class="l-footer">Footer</div>


.l-masthead      { width:100%; height:20px; top:0; left:0; position:absolute; background:orange; }
.l-navigation    { width:100%; height:20px; top:20px; left:0; position:absolute; background:green; }
.l-revision      { width:100%; height:20px; top:40px; left:0; position:absolute; background:lime; }
.l-pagenav-top   { width:100%; height:20px; top:60px; left:0; position:absolute; background:yellow; }

.l-data          { width:100%; position:absolute; top:80px; bottom:40px; left:0; }
.l-data-con      { width:100%; height:100%; position:relative; }
.l-data1         { padding:20px; overflow-y:auto; position:absolute; top:0; right:50%; bottom:0; left:0; background:LightBlue; }
.l-data2         { padding:20px; overflow-y:auto;position:absolute; top:0; right:0; bottom:0; left:50%; background:LightCyan; }

.l-pagenav-bot   { width:100%; height:20px; position:absolute; bottom:20px; left:0; background:yellow; }
.l-footer        { width:100%; height:20px; position:absolute; bottom:0; left:0; background:orange; }

This will be responsive down to a tablet form factor after that, with the type of complexity I think you are going to build in the app, it won't make sense. You will have to go back to UX to make complex apps like this work from phone.

Also, get your CSS out of inline and into an external CSS file.

这篇关于需要帮助格式化HTML页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！