0

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

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

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

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

因此，对此我有任何建议，我将不胜感激。

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

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

4

3 回答 3

0

带有 2 列的标题

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

现在将所需的左边距添加到第二列 div。它将在 2 列之间创建空间

于 2012-11-23T05:47:55.023 回答
0

它是一个简单的结构，可以创建如下（这里是 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}

希望它会帮助你:)

于 2012-11-23T06:45:16.217 回答
0 
<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>

用这个

于 2012-11-23T06:26:35.837 回答