如何從一個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%; 
    } 

}