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，因此您可以使用它来执行每个实例所需的任何特定样式。然后将所有较小的div元素包装在一个div中，并使用以下内容为它们分配，使它们连续显示为3：

＆＃13;

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

＆＃13;

最后，您的媒体查询可用于修改它们以显示2行：

＆＃13;

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

＆＃13;

我为您制作了示例笔here - 调整浏览器大小以使其正常工作。

＆＃13;

#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;
}

＆＃13;

<div id="bovenrij" class="clearfix">
		<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>

＆＃13;

Answer 2

要使divs堆叠成两个，你需要将6个div包装在一个包装div中。我已经调整了你的HTML和CSS。我添加了一个媒体查询，以便在800px以下，div将堆叠成两个，给它一个去！

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%;
    }

}

如何从一个div中的三个div到另一个旁边的两个div？

2 个答案: