Question

我正在开发一个非常简单的模板。或者我想。该模板最初并没有带侧边栏，所以我试图将它们偷偷带到那里。它根本不起作用 - 我根本看不到我的测试文本。

有人可以指出我做错了吗？

您可以在http://www.stfuisland.com/add.html

看到相关页面

代码发布在

下面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>STFU Island</title>
<style type="text/css">

a.header:link {
color:#ffffff;
text-decoration:none;
hover {color:#ffcc00;}
}

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 70px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}


#maincontent{    
position: fixed; 
top: 75px; /*Set top value to HeightOfFrameDiv*/
//left: 0;
//right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

#leftbar {
float: left;
width: 30%;
}

#rightbar {
float: right;
width: 30%;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}    

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>


<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="leftbar">
<div class="innertube">
<p>test</p>
</div></div>

<body>
<div id="rightbar">
<div class="innertube">
<p>test</p>
</div></div>

<div id="framecontent">
<div class="innertube">


<center><h3><font color="white"><a class="header" href="index.html">home</a> | <a href="islandstatus.html">Are You on an Island?</a> | <a href="about.html">About</a></font></h1></center>

</div>
</div>

<div id="maincontent">
<div class="innertube">
<center>
<form class="pure-form">
<fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Your Name" name="creatorname" size="50">
    <input type="text" class="pure-input-1-2" placeholder="Your Email" name="creatoremail">
    <input type="email" class="pure-input-1-2" placeholder="Relationship to people being sent to island" name="relationship">
</fieldset>

<fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Name of first person sent to STFU Island" name="person1">
    <input type="text" class="pure-input-1-2" placeholder="Their email address" name="email1">
</fieldset>


<fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Name of second person sent to STFU Island" name="person2">
    <input type="text" class="pure-input-1-2" placeholder="Their email address" name="email2">
</fieldset>


<fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Name of third person sent to STFU Island" name="person3">
    <input type="text" class="pure-input-1-2" placeholder="Their email address" name="email3">
</fieldset>

<fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Tell them why they're being sent to STFU Island!" cols="40" rows="5" name="reason">
</fieldset>


<button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="submit">Send them to STFU Island!</button>
<br>aaaaEmail addresses are sacred and we will treat them that way. Email addresses collected are only used to send emails when people are added or are being set free from STFU island. No other company will ever see or use them for any reason. Period.
</form>

</center>


</div>
</div>


</body>
</html>

Answer 1

添加到您的CSS :(对于#leftbar和#rightbar）

z-index: 2;
position: relative;

这对我有用，你可能也想使用颜色：#fff所以你可以看到它。使用text-align：center而不是center，使用1 div而不是彼此之间的多个div ..

来源非常繁忙而且凌乱;对于非常简单的事情来说太乱了。我将制作一个克隆，显示它可以简化并稍后更新。

Answer 2

您的左侧栏和右侧栏位于您的标题下方。我想你想要它们在maincontent里面和你的innertube旁边。移动内管旁边的div将显示在你想要的布局中。

<div id="leftbar">
   ...
</div>
<div class="innertube">
   ...
</div>
<div id="rightbar">
  ...
</div>

还添加一个浮子：留在你的内胎

Answer 3

您的标题为position: absolute，将其从正常流量中取出并隐藏您的侧边栏。

典型的带有页眉和页脚的三列布局可能看起来像

HTML

<div class="header">Header</div>
<div class="wrapper">
    <div class="nav left">Left Navigation</div>
    <div class="nav right">Right Navigation</div>
    <div class="content">
    </div>
</div>
<div class="footer">Footer</div>

CSS

.nav {
    background: green;
    width: 100px;
}

.nav.left {
    float: left;
}

.nav.right {
    float: right;
}

.content {
    margin-left: 100px;
    margin-right: 100px;
}

查看完整的JSFiddle

Answer 4

看看你的代码，我不能完全说出你的意思。它是一个带有左右栏的三列布局，中间内容的顶部是framecontent，底部是左侧的主要内容。 framecontent |右边的酒吧并且主要内容都在这三个之下？

如果您正在尝试实现基本的3列布局，则实际上不需要具有宽度为100％加上绝对位置的div。结果将是坐在左右栏顶部的div。

向左浮动左侧栏（浮动：左侧），将中间内容浮动到左侧，将右侧内容浮动到右侧，您将有3列布局。如果你想让framecontent和maincontent都位于中间，那么你可以将maincontent放在framecontent div中。

我希望我的解释不会太混乱。

CSS侧边栏没有显示出来

4 个答案: