Question

我正在尝试使用像素和百分比创建css布局。这是因为第一列（body_first）需要具有固定宽度，而后两个（body_second和body_third）需要具有流体宽度来填充页面的其余部分。有谁知道如何实现这一目标？提前感谢你！

<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    html, body {
        height: 100%;
        width: 1000px;
        background-image:url(main_bg.png);
    }
    body {
        font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
        font-size: 75%;
    }
    h1 {
        font-size: 1.4em;
        padding: 10px 10px 0;
    }
    p {
        padding: 0 10px 1em;
    }
    #container {
        min-height: 100%;
        border-left: 0px solid #666;
        border-right: 0px solid #666;
        padding: 0px 40px 0px 40px;
        margin: 0 auto;
    }
    * html #container {
        height: 100%;
    }
    #header {
        height: 40px;
        width: 1000px;
        padding-top: 10px;
    }
    .header_column {
        position: absolute;
        padding-top: 0px;
    }
    #header_second {
        margin-left: 400px;
        color:#FFF;
    }
    #header_third {
        margin-left: 80%;
        color:#FFF;
    }
    #body {
        height: 100%;
        width: 1000px;
    }
    .body_column {
        position: absolute;
        background-color:#FFF;
        height: 100%;
        overflow: auto;
    }
    #body_first {
        width: 168px;
        background-color: transparent;
        height: 640px;
        margin-top: 10px;
    }
    #body_second {
        margin-left: 163px;
        width: 400px;
        background-color:#FFF;
        height: 640px;
    }
    #body_third {
        margin-left: 563px;
        width: 400px;
        border: 1px;
        background-color: #919191;
        height: 640px;
    }
    #footer {
        padding-top: 50%;
    }
    </style>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="container">
      <div id="header">
        <div id="header_first" class="header_column"><img src="header_logo.png" width="35" height="16" border="0"></div>
        <div id="header_second" class="header_column">asdas</div>
        <div id="header_third" class="header_column">asdas</div>
      </div>
      <div id="body">
        <div id="body_first" class="header_column">
          <div style="background-image: url(tab_bg.png)">
            <div id="TabbedPanels1" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="1.png" width="20" height="17"></div>
                </li>
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="2.png" width="20" height="17"></div>
                </li>
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="3.png" width="20" height="17"></div>
                </li>
                <li class="TabbedPanelsTab" tabindex="0">
                  <div style="padding-top: 6px;"><img src="4.png" width="20" height="17"></div>
                </li>
    </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">Content 1</div>
                <div class="TabbedPanelsContent">Content 2</div>
                <div class="TabbedPanelsContent">Content 3</div>
                <div class="TabbedPanelsContent">Content 4</div>
    </div>
            </div>
          </div>
        </div>
        <div id="body_second" class="header_column">asdas</div>
        <div id="body_third" class="header_column">asdas</div>
      </div>
    </div>

Answer 1

这应该这样做，但这确实意味着将body_first放入body_second。这是一个一般的例子：

HTML：

<div class="two">
  <div class="one">col 1</div>
  <div class="inner">
    col 2
  </div>
</div>
<div class="three">col 3</div>

CSS：

body { margin: 0; }
.one { width: 168px; float: left; background: #F66; }
.two { position: absolute; width: 50%; background: #6F6; }
.two .inner { margin-left: 168px; }
.three { width: 50%; float: left; background: #66F; margin-left: 50%; }

http://jsfiddle.net/thewebdes/e2CNa/处的工作示例（使用滑块调整窗口大小以查看其运行情况）

在css布局中使用像素和百分比

1 个答案: