Question

我试图在我的2个内容div之间放置一个（水平）分隔符div。它不是放在它们之间，而是显示在我的横幅div下面（在2个内容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;
 }

Answer 1

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

编辑：

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

Answer 2

只需添加float：left

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

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

html - 在2个内容div之间添加div分隔符

2 个答案: