I'm trying to get a div that fills the whole width of my website with a gray colour. That's ok. Then I want to fill that div with images but not in the full width. When I try my code, the gray full width div comes first and the div with the images comes just under that one. How can I just place that div on top of that? Here's my code:
我想要一个div用灰色填充我网站的整个宽度。没关系。然后我想用图片填充div但不是全宽度。当我尝试我的代码时，灰色的全宽div会排在前面，带有图像的div会排在后面。我怎么能把div放在最上面呢?这是我的代码:
HTML
HTML
<div id="meerkaas" style="cursor:pointer;" >
<div id="kazensubmenu" style="cursor:pointer;">
<div class="col-md-3 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Botermelk</h3>
<h4>Tijdens het boteren verandert de room naar boterkorrels en botermelk. Deze worden van mekaar gescheiden en zo bekomt men botermelk.</h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Yoghurt</h3>
<h4>wordt gemaakt op basis van gepasteuriseerde melk. We laten de melk verzuren en op een bepaalde temperatuur rusten.
</h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Vla</h3>
<h4>meer gekend in Nederland, van kindsaf voor onze 3 zonen de nummer 1 in melkdessertjes, dit kon niet ontbreken in ons assortiment.</h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Botermelk</h3>
<h4>Tijdens het boteren verandert de room naar boterkorrels en botermelk. Deze worden van mekaar gescheiden en zo bekomt men botermelk.</h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Yoghurt</h3>
<h4>wordt gemaakt op basis van gepasteuriseerde melk. We laten de melk verzuren en op een bepaalde temperatuur rusten.
</h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Vla</h3>
<h4>meer gekend in Nederland, van kindsaf voor onze 3 zonen de nummer 1 in melkdessertjes, dit kon niet ontbreken in ons assortiment.</h4>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Vla</h3>
<h4>meer gekend in Nederland, van kindsaf voor onze 3 zonen de nummer 1 in melkdessertjes, dit kon niet ontbreken in ons assortiment.</h4>
</div>
</a>
</div>
</div>
</div>
</div>
CSS
CSS
#meerkaas {
margin-left: 0px;
margin-top: 650px;
margin-bottom: 95px;
background: #EEEEEE;
display: none;
width: 100vw;
margin-left: calc(-50vw + 50%);
border: 2px solid white;
}
#kazensubmenu {
margin-left: 300px;
margin-right: 300px;
margin-top: 650px;
margin-bottom: 95px;
background: gray;
display: none;
width: auto;
}
NOTE: i know the px is not responsive ok, that's for later..
注意:我知道px没有响应好的，那是以后的事。
1 个解决方案
#1
1
First of all you will run into big problems when using vw in Internet Explorer etc.
首先，在ie中使用vw会遇到大问题。
This should fix it:
这应该改正:
#meerkaas {
background: gray;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#kazensubmenu {
background: gray;
left: 300px;
position: absolute;
top: 650px;
width: calc(100% - 600px);
z-index: 2;
}
#1
1
First of all you will run into big problems when using vw in Internet Explorer etc.
首先，在ie中使用vw会遇到大问题。
This should fix it:
这应该改正:
#meerkaas {
background: gray;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#kazensubmenu {
background: gray;
left: 300px;
position: absolute;
top: 650px;
width: calc(100% - 600px);
z-index: 2;
}