简单的 CSS HTML 布局问题答案

【问题标题】：Simple CSS HTML layout issue简单的 CSS HTML 布局问题
【发布时间】：2014-02-15 15:39:44
【问题描述】：

我在编写包含居中内容、简单图像标题、两列（导航和主要内容）以及最后一个底部的页脚的 CSS 布局时遇到了问题。

问题是我无法让导航/主要内容列保持大小（分别为 200 和 718 像素）并在操作浏览器窗口时保持与页眉/页脚居中。

我尝试了各种类型的定位和容器，浮动导航/主列总是将它们从容器中分离出来。

有什么想法吗？

CSS：

body {
  text-align: center;
  margin: 0px 0px;
  padding: 0px; 
  background-color: #FFFFFF;
  font-family: Tahoma, Arial, sans-serif;
}

.header {
  max-width: 918px;
  margin: 15px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  position: relative;
  width: 100%;
}

.nav {
  display: inline;
  width: 200px;
  border-right: #111 solid 2px;
}

.main {
  display: inline;
  width: 700px;
}

.footer {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;  
}

html:

<body>
        <div class="header">header</div>
        <div class="container">
            <div class="nav">navigation</div>
            <div class="main">main</div>
        </div>
        <div class="footer">footer</div>

</body>

【问题讨论】：

你想要主 div 在导航下方还是在导航右侧？？
我需要导航右侧的主 div ....slash197 有完美的解决方案！非常感谢！

标签： html css

【解决方案1】：

试试这个：

.nav { display: inline-block; width: 200px; }
.main { display: inline-block; width: 700px; }
.container { display: block; width: 900px; margin: 0px auto; }

【讨论】：

【解决方案2】：

用这个改变你的css

body {
  text-align: center;
  margin: 0px 0px;
  padding: 0px; 
  background-color: #FFFFFF;
  font-family: Tahoma, Arial, sans-serif;
}

.header {
  max-width: 918px;
  margin: 15px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
          border:1px solid red;
}

.container {
clear: both;
    margin: 0 auto;
  width: 100%;
}
.contain{

width:960px;
margin: 0 auto;
position: relative;
}
.nav {
  width: 200px;
  border-right: #111 solid 2px;
   border:1px solid yellow;
    float:left;
    word-wrap: break-word;
}

.main {
  width: 718px;
   border:1px solid blue;
   float:left;
   word-wrap: break-word;
}

.footer {
clear:both;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;  
           border:1px solid green;
}

和 HTML 与这个。

<body>
        <div class="header">header</div>
        <div class="container">
            <div class="contain">
                <div class="nav">navigationnavigationnavigationnavigationnavigationnavitionnavigation</div>
                <div class="main">mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmnmainmainmainmain</div>
            </div>
        </div>
        <div class="footer">footer</div>
</body>

这样就可以正常工作了。

祝你好运……

【讨论】：