HTML/CSS：布局问题

Question

基本上，我正在尝试创建一个包含 3 行的简单网页模板。第一个是包含两列的标题，第二个只是主体，最后一个是页脚。

编码明智，我正在做这种布局

<div id="wrapper">
    <div id="header">
        <header>
        </header>
        <div id="col2>
        </div>
    </div>
    <div="mainbody"></div>
    <footer></footer>

基本上我现在遇到的问题是第一行有两列。基本上我在第一个有一张图片，在第二个有一堆按钮。理想情况下，我希望标题为 100% 宽度，以便它适合屏幕，第一列的内容贴在左侧，按钮贴在右侧。两者之间留有空白。所以可以说内容粘在两边。 目前我在 CSS 上使用float:left 作为第一列，我一直在搞乱浮动/对齐/位置，但我似乎无法工作。

因此，我将不胜感激。

我还有一个关于页脚的问题，基本上我什至不知道该怎么做。所以只是询问是否可能并指导在哪里寻找。

所以对于页脚，我想知道它是否可能，如果在页脚和浏览器 x 轴之间有适合屏幕的空白区域并且主体会伸展。因为到目前为止，我的身体只处于里面内容的高度。所以基本上是关于 CSS 的一般建议，以帮助实现样式以使其适合屏幕。

Answer 1

带有 2 列的标题

<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>

现在将所需的 margin-left 添加到第二列 div。它将在 2 列之间创建空间

Answer 2

<div id="wrapper">
     <header>
       <div id="column1" style="float:left;">Image</div>
       <div id="column2" style="float:left;">Buttons</div>
      </header>

   <div class="mainbody">
     Content
   </div>

<footer></footer>

使用这个

Answer 3

结构简单，可以创建如下（Here is DEMO）

HTML 是

<div id="wrapper">
    <div id="header">
        <header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
        </header>
        <div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
        </div>
    </div>
    <div="mainbody">mainbody
    </div>
    <footer></footer>
</div>

CSS 将是

#header{overflow:auto}
header{float:left}
#col2{float:right}

希望对你有帮助:)