我想为我的问题寻求帮助。我的表格很大,为了方便阅读,我决定将其设置为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彼此相邻?
谢谢!