Css html-在两个内容div之间添加div分隔符_Css_Html

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

css html

Css html-在两个内容div之间添加div分隔符,css,html,Css,Html,我试图在我的两个内容div之间放置一个（水平）分隔div。它不是放在它们之间，而是显示在我的横幅div下（2个内容div上方）以下是我的html的结构： <body> <div id="page"> <div id="header"> <div id="logo"></div> </div> <div id="menuContainer"> <div id=

我试图在我的两个内容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>

将

clear:both

添加到

#separator

或

溢出：hidden

添加到

#contentBlock

编辑：

对许多元素使用相同的

id

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

class

只需添加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;
}

请做一把小提琴。小提琴：

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

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