Question

我尝试使用三栏设计重新创建一个网页，如下页所示，但我遇到了一些麻烦。我尝试过使用嵌套的div，但代码似乎并没有因某些原因而起作用。这是html和css代码的片段

<body>
<div id="container">
<header>
<h1>The CIS 4004 Newsletter</h1>    
</header>

<div id="wrapper" role="main">

<nav>
<ul>
<li><a href="#test">Test link</a>; </li> 
</ul>
</nav>

<article>
<div class="inner">
    <h2>Test header</h2>
<p>Just some test text.
</p>
 </div>
 </article>
</div>
</div>
</body>

css代码在这里

 #wrapper {

        border: 1px solid black;
        position:relative;
        width:960px;
        margin:0 auto;
        overflow:hidden;
    }


    nav{
        width: 150px;
        float: left;
        border: 2px solid black;
        position:relative;
    }


    article.inner {
    margin:10px;
    padding:20px:
    border: 2px solid red;
    }

这是网页

的图片

http://jsfiddle.net/2yjhp/

Answer 1

简单模板

<div class="wrapper">
    <div class="left">Left Content</div>
    <div class="middle">Middle Content</div>
    <div class="right">Right Content</div>
</div>

--- --- CSS

div.wrapper {width: 1000px; margin: 0px auto;}
div.left {width: 250px; float: left;}
div.middle{float: left;}
div.right{width: 250px; float: left;}

Answer 2

无论您设计三列布局还是两列布局，要记住的关键是将所有列浮动到相同方向（左侧）并相应地调整宽度。没有必要使用嵌套div。例如：

       cloumnone{float: left;
                 width: 33%;}

与其他两个cloumns类似......

三栏设计HTML

2 个答案: