父div之外的div

Question

我试图创建一个页面结构，但我的div位置有问题。 我有2 div（紫色）成div父（红色）。在父div之后，另一个div（绿色）。我希望绿色底部是红色底部。 但浏览器向我显示紫色div不是红色的（他们的父母），所以绿色div不在红色和紫色div下面，而只在红色div下面。

我制作一个片段给你看：

＆＃13;

＆＃13;

div#form {
	background: red;
}
div#search {
	background: yellow;
}

div.accostati {
	float: left;
	margin: 5px;
	background: purple;
}

div#test {
	background: green;
}

＆＃13;

<div id="form">
	<p> CERCA GOMME </p>
				
	<div id="label-search" class="accostati">
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
	</div>
		
	<div class="accostati">
		<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
			<select name="marca">
				<option value="1">1</option>
							
			</select><br>	
            <select name="modello">
				<option value="2">2</option>
							
			</select>	<br>
			<input type="submit" value="CERCA">
		</form>
	</div>
				

</div>
		

<div id="test">
  riga1 <br>
  riga2 <br>
  riga3 <br>
</div>

＆＃13;

＆＃13;

＆＃13;

您是否知道如何将紫色div显示为红色div，以便在紫色和红色div下都有绿色div ...

谢谢！

Answer 1

将overflow:auto添加到div#form：

div#form {
    background: red;
    overflow:auto;
}

div#form {
	background: red;
    overflow:auto;
}
div#search {
	background: yellow;
}

div.accostati {
	float: left;
	margin: 5px;
	background: purple;
}

div#test {
	background: green;
}

<div id="form">
	<p> CERCA GOMME </p>
				
	<div id="label-search" class="accostati">
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
	</div>
		
	<div class="accostati">
		<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
			<select name="marca">
				<option value="1">1</option>
							
			</select><br>	
            <select name="modello">
				<option value="2">2</option>
							
			</select>	<br>
			<input type="submit" value="CERCA">
		</form>
	</div>
				

</div>
		

<div id="test">
  riga1 <br>
  riga2 <br>
  riga3 <br>
</div>

Answer 2

您可以对这两个div使用display：inline-block

喜欢这个

div#form {
    background: red;
    display: inline-block;
}

div.accostati {
    display: inline-block;
    margin: 5px;
    background: purple;
}

div#form {
	background: red;
    display: inline-block;
}
div#search {
	background: yellow;
}

div.accostati {
	display: inline-block;
	margin: 5px;
	background: purple;
}

div#test {
	background: green;
}

<div id="form">
	<p> CERCA GOMME </p>
				
	<div id="label-search" class="accostati">
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
		<p class="select">LABEL-FIELD:</p><br>
	</div>
		
	<div class="accostati">
		<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
			<select name="marca">
				<option value="1">1</option>
							
			</select><br>	
            <select name="modello">
				<option value="2">2</option>
							
			</select>	<br>
			<input type="submit" value="CERCA">
		</form>
	</div>
				

</div>
		

<div id="test">
  riga1 <br>
  riga2 <br>
  riga3 <br>
</div>