0

少し問題が見つかりました。隣り合わせに 2 つの div を作成し、その下に 1 つ作成する必要があります。分かりやすく説明できるように絵を描いています。その主な 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

最初の2つの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 に答える