html - 在两个内容divs之间添加一个div分隔符

我想在我的两个内容div之间放一个（水平）分隔符div。而不是放在它们之间，它显示在我的横幅div（在2个内容div上方）下。html - 在两个内容divs之间添加一个div分隔符

这里是我的html结构：

<body> 

<div id="page"> 

<div id="header"> 

    <div id="logo"></div> 

</div> 

    <div id="menuContainer"> 

     <div id="menu"> 
      <ul id="btns"> 
       <li><a href="#">DOMOV</a></li> 
       <li><a href="#">SVETEĽNÉ ZDROJE</a></li> 
       <li><a href="#">CHLADIČE</a></li> 
       <li><a href="#">NAPÁJANIE</a></li> 
       <li><a href="#">KONEKTORY</a></li> 
       <li><a href="#">OPTIKA/REFLEKTORY</a></li> 
       <li><a href="#">KONTAKTY</a></li> 
      </ul> 
     </div> 

    </div> 

    <div id="banner"></div> 
    <div id="separator"></div> 

<div id="contentContainer"> 

    <div id="contentBlock"> 

     <div id="contentLeft"> 
     <p id ="nadpis">LED SVETELNE ZDROJE</p> 
     <p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p> 
     <p id ="katalog">KATALÓG NA STAHNUTIE</p> 
     <a href="#"><div id="pdf" ></div></a> 

     <div id="dodavatelia"> 
      <div id="pic1"></div> 
      <div id="pic2"></div> 
     </div> 


    </div> 

    <div id="contentRight"> 
     <p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p> 

     <ul id="rozdel"> 
       <li>COB</li> 
       <li>SMD</li> 
       <li>LED PÁSY</li> 
       <li>LED MODULY</li> 
      </ul> 

    </div> 

</div> 

<div id="oddelovac1"></div> 

<div id="contentBlock"> 

     <div id="contentLeft"> 
     <p id ="nadpis">LED SVETELNE ZDROJE</p> 
     <p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p> 
     <p id ="katalog">KATALÓG NA STAHNUTIE</p> 
     <a href="#"><div id="pdf" ></div></a> 

     <div id="dodavatelia"> 
      <div id="citizen"></div> 
      <div id="qlt"></div> 
     </div> 


    </div> 

    <div id="contentRight"> 
     <p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p> 

     <ul id="rozdel"> 
       <li>COB</li> 
       <li>SMD</li> 
       <li>LED PÁSY</li> 
       <li>LED MODULY</li> 
      </ul> 

    </div> 

</div> 

<div id="separator"></div> 

<div id="contentBlock> 
... The same structure 
</div> 

</div> 

</div> 

</body>

这里是我的CSS：

body { 
margin:0; 
} 


#page { 
width:100%; 
} 

#header{ 
width:1000px; 
height:100px; 
margin:auto; 
} 

#logo { 
width:140px; 
height:47px; 
background:url('../img/logo.png')no-repeat; 
margin-top:50px; 

} 

#menuContainer { 
height:37px; 
width:100%; 
background:#c4c8ca; 
} 

#menu{ 
width:1000px; 
margin:auto; 
} 

#menu ul { 
padding-top:8px; 
text-align:right; 
} 


#banner { 
width:100%; 
height:353px; 
background:url('../img/banner.png')no-repeat; 
margin-top:2px; 
} 

#separator { 
width:100%; 
height:31px; 
background:url('../img/oddelovac.png')no-repeat; 
margin-top:6px; 
} 


#contentContainer { 
width:100%; 
display:block; 
} 

#contentBlock { 
width:1000px; 
margin:auto; 
} 

#contentLeft { 
width:650px; 
float:left; 
} 

#contentRight{ 
width:350px; 
float:left; 
}

来源

2014-01-23 user2886091

拨打的jsfiddle请。 – veritas

小提琴：http://jsfiddle.net/6d7y8/ – user2886091

添加clear: both到#separator或overflow: hidden到#contentBlock。

编辑：

您使用的很多元素相同id属性值 - 只能有一个，是唯一的。如果您想对多个元素使用相同的样式，请使用class。

来源

2014-01-23 21:57:03 atlavis

只需添加浮动：左

#contentBlock { 
width:1000px; 
margin:auto; 
float:left; 
} 

#separator { 
width:100%; 
height:31px; 
background-color:rgb(255,0,255); 
margin-top:6px; 
float:left; 
}

来源

2014-01-23 22:09:33

html - 在两个内容divs之间添加一个div分隔符

回答

相关问题