Fatal编程技术网
  • css/
  • Css 三栏设计HTML

Css 三栏设计HTML

css html

Css 三栏设计HTML,css,html,Css,Html,我正在尝试重新创建一个三栏设计的网页，如下图所示，但遇到了一些问题。我尝试过使用嵌套的div，但由于某些原因，代码似乎不起作用。下面是一段html和css代码 <body> <div id="container"> <header> <h1>The CIS 4004 Newsletter</h1> </header> <div id="wrapper" role="main"> <nav>

我正在尝试重新创建一个三栏设计的网页，如下图所示，但遇到了一些问题。我尝试过使用嵌套的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>
这是网页的图片

简单模板

<div class="wrapper">
    <div class="left">Left Content</div>
    <div class="middle">Middle Content</div>
    <div class="right">Right Content</div>
</div>
无论您是设计三列布局还是两列布局，要记住的关键是将所有列浮动在同一方向（左侧），并相应地调整其宽度。不需要使用嵌套的div。 例如：

其他两个克隆也一样…

什么不起作用？你的代码绝对不会生成任何类似于该图像的内容。这就是你迄今为止所做的：你的确切问题是什么？例如，我试图将中间框的颜色更改为红色，以查看代码是否正常工作。正如你在jsbin上看到的，它不起作用。请看这里：@user3558122我们不会为你做作业。这里是家庭作业的精确链接（它会下载powerpoint）。你忘记了结束语，我调整了它。：） 
<div class="wrapper">
    <div class="left">Left Content</div>
    <div class="middle">Middle Content</div>
    <div class="right">Right Content</div>
</div>

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

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