0

我发现了一个小问题。我需要创建两个相邻的 div 和一个在它们下面。我画了一张图片，以便更好地解释它。那个主要的DIV是CSS中的#header。

解释我想要什么

所以这里是html代码：

<div id="header">
  <div id="header-wrap">
    <div id="div1"></div>
    <div id="div2"></div>
    <hr> <!-- This is that line under #div1 and #div2 -->
    <div id="div3"></div>
  </div>
</div>

这是我的 CSS 代码：

#header {
    background-image: url("../img/header.jpg");
    background-position: center center;
    background-repeat: repeat-y;
    height: 180px;
    width: 100%;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 80%;
    padding-top: 30px;
}
#div1 {
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    height: 80px;
    margin-bottom: 20px;
}
#div2 {

}
#header hr {
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#div3 {

}

我不知道要在#div2 和#div3 中添加什么，所以它的样式是我想要的。谢谢你的帮助。

4

4 回答 4

1

使用此 CSS，您可以实现它：

#div1 {
    float: left;
    background: red;
    height: 80px;
    width: 40%;
    margin-bottom: 20px;
}

#div2 {
    float: right;
    background: red;
    height: 80px;
    width: 40%;
}

#div3 {
   width: 100%;
   height: 20px;
   background: red;
}

#header hr {
   clear: both;
   ...
}

演示：JsFiddle

于 2013-04-28T09:04:18.097 回答
1

小提琴。

#header {
    background: black;
    width: 100%;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    width: 80%;
    padding: 30px 0;
}
#div1, #div2 {
    float: left;
    width: 48%;
    height: 80px;
    margin-bottom: 20px;
}
#div1 {
    background: red;
    margin-right: 4%;
}
#div2 {
    background: blue;
}
#header hr {
    border: 0;
    height: 1px;
    background-color: grey;
    clear: both;
}
#div3 {
    background: green;
    height: 80px;
}
于 2013-04-28T09:07:24.713 回答
1

与上述几乎相同的答案，只是从我所知道的内容中浮动，不适用于所有（旧）浏览器。

小提琴http://jsfiddle.net/rbHah/

<style type="text/css">

#header {
    background-image: url("../img/header.jpg");
    background-position: center center;
    background-repeat: repeat-y;
    height: 180px;
    width: 100%;

    background-color:yellow;

    position:relative;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 80%;
    padding-top: 30px;

    background-color:green;
}
#div1 {
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    height: 80px;
    width:50%;
    margin-bottom: 20px;

    float:left;

    background-color:yellow;
}
#div2 {
    width:50%;
    height:80px;
    float:left;

    background-color:orange;


}
#header hr {
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#div3 {

}
</style>


<div id="header">
  <div id="header-wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div style="clear:both;"></div> <!--this div is verry important after floating divs! -->
    <hr> <!-- This is that line under #div1 and #div2 -->
    <div id="div3">div3</div>
  </div>
</div>
于 2013-04-28T09:07:53.590 回答
1

使前两个 div 向左浮动并固定其宽度，然后在您的<hr>

#div1 {
    background-color:#aa6666;
    float:left;
    height: 80px;
    width:150px;
    margin-bottom: 20px;
}
#div2 {
    background-color:#aaaa66;
    float:left;
    height: 80px;
    width:150px;
    margin-bottom: 20px;
}
#header hr {
    border: 0;
    clear: both;
    /*...*/
}
于 2013-04-28T09:13:10.900 回答