我的一些浮动DIV在Chrome和Firefox中无法对齐

时间:2018-07-25 10:14:53

标签: html css google-chrome internet-explorer firefox

我想为我的问题寻求帮助。我的表格很大,为了方便阅读,我决定将其设置为2列。 我有一个容器DIV,并且里面有DIV,将其分为2部分。我已经将内部DIV对齐以彼此相邻漂浮。 在IE11中,(大多数情况下)它可以工作,但是由于某种原因,它不能像我在其他浏览器上那样工作:某些DIV之间存在“间隙”。

代码如下:

.container {
	width: 100%;
	font-size: 80%;
}


.contentwrapper {
	width: 80%;
  margin: 0 auto;
}

.Box {
	border: black 1px dotted; 
	padding: 1em;
	margin: 0 auto 3% 0;
	min-width: 55em;
	overflow: hidden;	
}

.Box .Header {
	background-color: #f7f7f7;
	font-weight: bold;
	font-size: 110%;
	padding-left: 5px;
	padding-right: 5px;
}

.Section {
	width: 45%;
	float: left;
	padding: 5px;
	display:inline-block;
	background-color: red;
	vertical-align: bottom;
}



.Section .Question {
	width: 32%;
	float: left;
}

.Section .Answer {
	text-align: left;
	width: 65%;
	float: left;
}

.Section .help {
	width: 15px;
	float:right;
	background-image: url("images/helpbutton.png");
	background-repeat: no-repeat;
}

.Section .Sectioninput, .Section select {
	width: 95%
}

.Section .smallInput {
	width: 5em;
}

.Section #orszagS{width: 28%}
.Section #countryT{width: 48%}
.Section #cityname{width: 50%}
	<div class="container">	
		<div class="contentwrapper">
			<fieldset class="Box">
				<legend class="Header">Alapadatok</legend>
				<div class="Section">
					<div class="Question"><label for="countryT">Country</label></div>
					<div class="Answer">
						<select id="countryS" class="smallInput">
						  <option value="hungary">Hungary</option>
						  <option value="other">Other</option>
						</select>
						<input type="text" class="Sectioninput required" id="countryT" name="countryT" value="Hungary" disabled />
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="county">County</label></div>
					<div class="Answer">
						<select name="county" id="county" class="required">
						  <option value=""> </option>
						  <option value="1">Option 1</option>
						  <option value="2">Option 12</option>
						</select>
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="cityname">City</label></div>
					<div class="Answer">
						<input type="text" class="smallInput required" name="zipcode" value="" placeholder="Zip Code"/>
						<input type="text" class="required" id="cityname" name="cityname" value="" placeholder="City"  />
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="location">Location</label></div>
					<div class="Answer required">
						<select name="location" id="location">
						  <option value=""> </option>
						  <option value="1">Outside</option>
						  <option value="0">Inside</option>
						</select>
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="bnumber">Number</label></div>
					<div class="Answer">
						<input type="text" class="Sectioninput required" name="bnumber" id="bnumber" value="" />
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="relnumbers">Related Numbers</label></div>
					<div class="Answer">
						<input type="text" class="Sectioninput" name="relnumbers" id="relnumbers" value="" />
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="address">Address</label></div>
					<div class="Answer">
						<input type="text" class="Sectioninput" name="address" id="address" value="" />
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="name">Name</label></div>
					<div class="Answer">
						<input type="text" class="Sectioninput required" name="name" id="name" value="" />
					</div>
					<div class="help"><br /></div>
				</div>
				<div class="Section">
					<div class="Question"><label for="function">Function</label></div>
					<div class="Answer">
						<input type="text" class="Sectioninput" name="function" id="function" value="" />
					</div>
					<div class="help"><br /></div>
				</div>
			</fieldset>
 </div>
 </div>

我用红色背景制作了内部DIV,因此更容易看到白色间隙。我该怎么做才能使每行中两个DIV彼此相邻?

谢谢!

0 个答案:

没有答案