如何从一个div中的三个div到两个彼此相邻的div？

Question

我的问题是，我有一个div的三个div。上方和下方。当我缩放时，我想让所有的div都彼此相邻。作为连续两个div。我的问题在这里。 https://jsfiddle.net/nsjrqjw9/

有没有人有一个想法如何让两个div在一排上彼此相邻，并与其余的一样。

我认为这是媒体查询的东西，但我不知道。

#bovenrij{ 
margin-top: 2em; 
width: 80%; 
float: right; 
margin-right: 3em; 

} 

#onderrij{ 
width: 80%; 
margin-top: 0.2em; 
float: right; 
margin-right: 3.5em; 
margin-bottom: 4em; 
} 

/*linkseblok*/ 
#interactief{ 
width: 27%; 
background-color: #e8b215; 
float: left; 
padding-top: 1em; 
padding-bottom: 1em; 
padding-left:1em ; 
padding-right: 1em; 
} 

/*licht roze achtergrond kleur*/ 
#platform, #ad, #platformad, #customised, #personal{ 
background-color: #f4f4f4; 
float: left; 
width: 27%; 
margin-left: 0.5em; 
padding-top: 1em; 
padding-bottom: 1em; 
padding-left: 1em; 
padding-right: 1em; 
} 
/*titel*/ 
#interactief > h1{ 
color: white; 
font-size: 18px; 
margin-bottom: 0.4em; 
} 
/*titel*/ 
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{ 
color: #e8b215; 
font-size: 18px; 
margin-bottom: 0.4em; 
} 
/*sub titel*/ 
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised > h2, #personal > h2{ 
color: black; 
margin-bottom: 1em; 

} 
/*uitleg tekst*/ 
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p, #personal > p{ 
line-height: 120%; 
margin-bottom: 1em; 
} 
/*lees meer*/ 
#interactief > h3 { 
margin-left: 0em; 
background-color: #3c434a; 
padding: 0.5em; 
width: 4.75em; 
border-radius: 0.3em; 
} 
/*lees meer*/ 
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{ 
background-color: #3c434a; 
width: 4.75em; 
padding: 0.5em; 
border-radius: 0.3em; 
} 

Answer 1

你是对的，你可以使用媒体查询来改变在不同屏幕尺寸的div元素的显示。 Media Rule on W3Schools

由于您已为每个div分配了唯一的ID，因此您可以使用该ID来执行每个实例所需的任何特定样式。然后包装所有的小div元素单格内，用下面的分配，使它们连续出现3：

#bovenrij div{ 
 
    width: 33.333%; 
 
    float: left; 
 
}

最后你的媒体查询可以用来修改它们以显示2行：

@media screen and (max-width: 1088px) { 
 
    #bovenrij div{ 
 
     width: 50%; 
 
     float: left; 
 
    } 
 
}

I H ave为你做了一个样本笔here - 调整浏览器的大小以查看它的工作。

#bovenrij { 
 
    width: 80%; 
 
    background: #f6f6f6; 
 
    float: right; 
 
} 
 
#bovenrij div{ 
 
    width: 33.333%; 
 
    float: left; 
 
} 
 
#platformad { 
 
    background: gold; 
 
} 
 
#interactief { 
 
    background: red; 
 
} 
 

 

 
@media screen and (max-width: 1088px) { 
 
    #bovenrij div{ 
 
     width: 50%; 
 
     float: left; 
 
    } 
 
} 
 

 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
}

<div id="bovenrij" class="clearfix"> 
 
\t \t <div id="interactief"> 
 
\t \t \t <h1>Interactieve video's</h1> 
 
\t \t \t <h2>Zijn met Lorem Ipsum</h2> 
 
\t \t \t <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="platform"> 
 
\t \t \t <h1>Ons Online Video Platform</h1> 
 
\t \t \t <h2>Is altijd Ipsum Color</h2> 
 
\t \t \t <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="ad"> 
 
\t \t \t <h1>Video Advertentie Platforms</h1> 
 
\t \t \t <h2>Zijn zeer lorem ipsum dolor</h2> 
 
\t \t \t <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 

 
<div id="platformad"> 
 
\t \t \t <h1>Video advertentie Platforms</h1> 
 
\t \t \t <h2>Zijn zeer Lorem Ipsum dolor</h2> 
 
\t \t \t <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="customised"> 
 
\t \t \t <h1>De customised Player</h1> 
 
\t \t \t <h2>Bieden wij Lorem Ipsum Dolor</h2> 
 
\t \t \t <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 
\t \t <div id="personal"> 
 
\t \t \t <h1>Gepersonaliseerde Video's</h1> 
 
\t \t \t <h2>Kunnen de Lorem Ipsum dolor</h2> 
 
\t \t \t <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
 
\t \t \t <h3>Lees meer</h3> 
 
\t \t </div> 
 

 
\t </div>

Answer 2

要三三两两的div堆栈需要6周到的div被包裹在一个包装DIV。我已经调整了你的HTML和CSS。我添加了一个媒体查询，以便在800像素以下的divs将两个堆叠，让它一去！

HTML：

<div id="bovenrij"> 
    <div id="interactief"> 
     <h1>Interactieve video's</h1> 
     <h2>Zijn met Lorem Ipsum</h2> 
     <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
     <h3>Lees meer</h3> 
    </div> 

    <div id="platform"> 
     <h1>Ons Online Video Platform</h1> 
     <h2>Is altijd Ipsum Color</h2> 
     <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
     <h3>Lees meer</h3> 
    </div> 

    <div id="ad"> 
     <h1>Video Advertentie Platforms</h1> 
     <h2>Zijn zeer lorem ipsum dolor</h2> 
     <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
     <h3>Lees meer</h3> 
    </div> 


    <div id="platformad"> 
     <h1>Video advertentie Platforms</h1> 
     <h2>Zijn zeer Lorem Ipsum dolor</h2> 
     <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
     <h3>Lees meer</h3> 
    </div> 

    <div id="customised"> 
     <h1>De customised Player</h1> 
     <h2>Bieden wij Lorem Ipsum Dolor</h2> 
     <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
     <h3>Lees meer</h3> 
    </div> 

    <div id="personal"> 
     <h1>Gepersonaliseerde Video's</h1> 
     <h2>Kunnen de Lorem Ipsum dolor</h2> 
     <p>Present commodo cursus nagnva vel scelerisque nisl</br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p> 
     <h3>Lees meer</h3> 
    </div> 
</div> 

CSS

#bovenrij{ 
    margin-top: 2em; 
    width: 80%; 
    float: right; 
    margin-right: 3em; 

} 

#onderrij{ 
    width: 80%; 
    margin-top: 1em; 
    float: right; 
    margin-right: 3em; 
    margin-bottom: 4em; 
} 

/*linkseblok*/ 
#interactief{ 
    width: 28%; 
    background-color: #e8b215; 
    float: left; 
    padding-top: 1em; 
    padding-bottom: 1em; 
    padding-left:2% ; 
    padding-right: 2%; 
} 

/*licht roze achtergrond kleur*/ 
#platform, #ad, #platformad, #customised, #personal{ 
    background-color: #f4f4f4; 
    float: left; 
    width: 28%; 
    margin-left: 2%; 
    margin-bottom: 1em; 
    padding-top: 1em; 
    padding-bottom: 1em; 
    padding-left: 2%; 
    padding-right: 2%; 
} 
#platformad {margin-left: 0px;} 
/*titel*/ 
#interactief > h1{ 
    color: white; 
    font-size: 18px; 
    margin-bottom: 0.4em; 
} 
/*titel*/ 
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{ 
    color: #e8b215; 
    font-size: 18px; 
    margin-bottom: 0.4em; 
} 
/*sub titel*/ 
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised > h2, #personal > h2{ 
    color: black; 
    margin-bottom: 1em; 

} 
/*uitleg tekst*/ 
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p, #personal > p{ 
    line-height: 120%; 
    margin-bottom: 1em; 
} 
/*lees meer*/ 
#interactief > h3 { 
    margin-left: 0em; 
    background-color: #3c434a; 
    padding: 0.5em; 
    width: 4.75em; 
    border-radius: 0.3em; 
} 
/*lees meer*/ 
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{ 
    background-color: #3c434a; 
    width: 4.75em; 
    padding: 0.5em; 
    border-radius: 0.3em; 
} 



@media screen and (max-width: 800px) { 

    #interactief, #platform, #ad, #platformad, #customised, #personal { 
     width: 45%; 
     margin: 0px; 
    } 
    #platform, #platformad, #personal { 
     margin: 0 0 1em 2%; 
    } 

}