0

我有以下内容：

<div id="aboutus">
<div id="header"></div>
<div id="headerbar"><p>ABOUT US</p></div>
<div id="contentarea">
<p>CONTENT ABOUT US</div>
<div id="clear"></div></div>

<div id="contact">
<div id="header"></div>
<div id="headerbar"><p>CONTACT US</p></div></div>
<div id="contentarea">CONTENT CONTACT US</div>
<div id="clear"></div>
</div>

和：

#aboutus {
    float:left;
    width:100%;
    height:100%;
}
#contact{
    float:left;
    width:100%;
    height:100%;
}
#headerbar {
    float:left;
    width:25%;
    height:100px;
    text-align:right;
    padding-right:5px;
}
#contentarea{
    float:left;
    width:70%;
    height:100px;
}
#clear{
    clear: both;
}
#header{
    background:url(bg.png) no-repeat center center;
    background-size:contain;
    width:100%;
    height:200px;
}

我对此完全陌生，所以我确定我在做一些愚蠢的事情。基本上它的两个 2 列布局相互叠加，aboutus div 很好，但是联系人 div 显示在 about us div 中。关于我做错了什么有什么建议吗？

4

3 回答 3

0

您的代码应该是：

<div id="aboutus">
<div class="header"><div class="headerbar"><p>ABOUT US</p></div></div>
<div class="contentarea">
<p>CONTENT ABOUT US</div>
</div>
<div id="clear"></div>
<div id="contact">
<div class="header"><div class="headerbar"><p>CONTACT US</p></div></div>
<div class="contentarea">CONTENT CONTACT US</div></div>
<div id="clear"></div>
</div>

和：

#aboutus {
    float:left;
    width:100%;
    height:100%;
}
#contact{
    float:left;
    width:100%;
    height:100%;
}
#headerbar {
    float:left;
    text-align:right;
    padding-right:5px;
}
.contentarea{
    float:left;
    width:70%;
    height:100px;
}
#clear{
    clear: both;
}
.header{
    width:25%;
    height:100px;    
    background:url(bg.png) no-repeat center center;
    background-size:contain;
    float: left;
}
div {border:1px black solid;
}

我添加了边框，这样你就可以看到你的 div 在哪里。浮点数很难处理，当你 100% 地使用它时，它会更加复杂。

提示：将 ID 用于代码中的唯一对象，将 CLASS 用于在同一页面上重复的元素（#id 用于单个元素，.class 用于将相同样式应用于页面上的多个元素时） .

在这里玩：http: //jsfiddle.net/VPzyy/

祝你好运！

于 2013-06-17T03:49:37.153 回答
0

如果您想在另一个之上指定两个 div，可以使用display:block;以下width:100%;内容指定

.div{
    display: block;
    width: 100%;
}

您不必使用浮点数。当然，有很多方法可以实现，这是实现目标的方法之一。你可以在这里玩这个http://jsfiddle.net/qiqiabaziz/mrrQU/

于 2013-06-17T02:36:52.637 回答
0

如果您通过验证器运行您的 html （这是一个很好的做法），您会看到其中有一个额外的</div>标签。如果我理解您要正确执行的操作，则它是您的第二个标题栏 div 之后的两者之一。</div>当您不希望它关闭时，那个额外的标签正在关闭您的联系人 div。

我个人总是在关闭 div 时发表评论，以便我可以确切地看到</div>关闭了什么。像这样：

<div id = "outerdiv">
     <div class = "innerdiv">
          <p>text</p>
          <div class = "innerdiv2">
               <p>more text</p>
          </div><!-- .innerdiv2 -->
     </div><!-- .innerdiv -->
</div><!-- #outerdiv-->

这样，即使我弄乱了缩进，仍然很容易看到到底发生了什么。

于 2013-06-17T20:19:29.453 回答