我的CSS中有一个小问题，我正在尝试创建2列布局，我看到内容之间的随机空白。我无法正确解释，请检查我在jsfiddle中创建的样本。你将能够理解。右侧我正在尝试创建2列。
这里是jsfiddle链接 http://jsfiddle.net/QZJJL/3/
HTML
<div class="mainsection">
<div class="visitMainSection">
<div class="VISIT headingsection">Open Site Visits</div>
<div class="scrolldiv visit_repeatSection1" style="">
<div class="header sectionheader TODAY">TODAY</div>
<div class="content TODAY_1">
<div class="leftColumn">
<div class="ellipsis">
<h3 class="label1"><span class="facid">4002</span><span class="facName"> ABC Comapny Ltd.(Ark Bal Cave)</span></h3>
</div>
<p class="facLocalName" style="display: none;"></p>
<p class="facAddress">Building 5, 6th floor Darjaling Road, Shan District CAV</p>
<p class="label4"><span class="city">Shenzhen</span><span class="state"> Gurgao</span><span class="country"> India</span></p>
<p class="label5"><span class="longitude" style="display: none;"></span><span class="latitude" style="display: none;"></span></p>
</div>
<div class="rightColumn">
<div class="rightGroup">
<div class="groupproto">
<h3><span class="protocolname show"> Test Protocol 10</span> <span class="date_class show"> NOV 18 - NOV 30, 2013</span></h3>
</div>
<p class="onsiteLead bold" style="display:none;">ONSITE LEAD: <span></span></p>
<div class="multirow">
<div>
<h5 class="audit_com" style="display:none;">Golder</h5>
<h5 class="auditor">J1</h5>
<p class="assignments">Antidsdsdsdsd<br>Labor & Human Rights</p>
<h5 class="auditor">Y1 (Lead)</h5>
<p class="assignments">dsdsdsdsdsdsdsd</p>
</div>
<div>
<h5 class="audit_com" style="display:none;">Verite</h5>
<h5 class="auditor">S1</h5>
<p class="assignments">Wages & Benefits<br>Labor & Human Rights</p>
<h5 class="auditor">C1 (Lead)</h5>
<p class="assignments">antidiscrimas<br>Labor & Human Rights</p>
<h5 class="auditor">D1</h5>
<p class="assignments">antidiscrimas<br>Labor & Human Rights<br>Wages & Benefits</p>
</div>
<div>
<h5 class="audit_com" style="display:none;">PWC</h5>
<h5 class="auditor">L1 (Lead)</h5>
<p class="assignments">antidiscrimas<br>Labor & Human Rights</p>
<h5 class="auditor">M1</h5>
<p class="assignments">Labor & Human Rights<br>Wages & Benefits</p>
<h5 class="auditor">M2</h5>
<p class="assignments">Antidiscrimination<br>Labor & Human Rights<br>Wages & Benefits</p>
<h5 class="auditor">V1</h5>
<p class="assignments">Antidiscrimination<br>Labor & Human Rights<br>Wages & Benefits</p>
</div>
<div>
<h5 class="audit_com" style="display:none;">Supplier Responsibility</h5>
<h5 class="auditor">G1 (Lead)</h5>
<p class="assignments">antidiscrimas<br>Labor & Human Rights<br>Wages & Benefits</p>
<h5 class="auditor">R1</h5>
<p class="assignments">antidiscrimas<br>Labor & Human Rights</p>
<h5 class="auditor">R2</h5>
<p class="assignments">Labor & Human Rights<br>Wages & Benefits</p>
</div>
</div>
<div class="footer">
<input type="button" class="setupButton" value="Visit Setup" style="display:none;">
<p class="downloadBriefcase"> </p>
</div>
</div>
<div class="linkButton"> <input type="button" class="lplinkbutton" value=">" onclick="top.openPageURL('Pushinfolet?id=101652&proc=146194&flag=1&emd=2&accessflag=2&edit_flag=D&wrapper=no')" style="height: 558px;"> </div>
</div>
</div>
</div>
</div>
</div>
CSS
html{
min-height: 100%;
}
.headingsection {
font-weight: 600;
font-size: 23px;
padding-bottom: 5;
padding-top: 0;
margin-top: 0;
}
body {
min-height: 100%;
font-family: "Avenir Next", "Avenir", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !important;
}
.mycustcls{
background-color: white;
padding-left: 5;
}
.sectionheader{
background-color: #C2C2C2;
color: white;
padding: 5px;
font-weight: 500;
font-size: 16px;
}
.sectionspacer{
height:20px;
}
.sectionrows{
background-color: rgba(240, 240, 240, 0.93);
padding: 10;
padding-right: 0;
overflow: hidden;
}
.colsheader{
height: auto;
color: white;
font-weight: 500;
font-size: 14px;
float: left;
}
.sectioncols{
width: 300px;
height: auto;
float: left;
color: black;
font-weight: normal;
font-size: 13px;
}
.mainsection{
padding:10px;
}
.anotherspacer{
background-color: rgba(231, 231, 231, 0.72);
}
.rowseparator{
border: 2px solid #CFCFCF;
}
.content { clear: both; font-size: 13px;}
.Separator {border-top: 2px solid #858585;}
.date_class { float:right; font-weight: normal; }
.rightGroup { float: left; width:80%;}
.anchor{cursor:pointer;font-weight:500;}
.linkbutton {}
.lplinkbutton{
float: right;
vertical-align: middle;
cursor:pointer;
border:0;
font-weight: 500;
font-size: 15;
margin: 0;
padding:0 10px;
background-color: rgba(173, 172, 172, 0.12); }
.scrolldiv{
overflow-x: auto;
background-color: #F0F0F0;
color: black;
border: 2px solid #858585;
width: 1237px;
}
.colfacility_id,.colfacility_name{
font-weight:600;
text-decoration:underline;
}
.colfacility_id,.colfacility_local_name,.colfacility_address,.colcity,.collongitude{width:500px;padding-top:2px;}
.colprotocol_name{
font-weight:500;
margin-left: 50px;
width:500px;
}
.hidden{display:none;}
.colname{font-weight:600;}
.colfacility_address.colfacility_local_name,.colname{padding-top:5px; width: 235px;}
.offlineclass{width:170px;color:black;font-size: 13px;}
.downloadasmnt{
width: 73px;
height: 29;
border: 1px solid rgb(49, 120, 153);
border-radius: 6;
background-color: rgba(173, 172, 172, 0.94);
color: white;
font-weight: 500;
}
.datefloat{
color: #666;
font-size: 12px;
}
.datefloat,.offlineclass{
font-weight:normal;
float:right;
}
/*div.tt_upcoming.sectionheader{
background-color: rgba(240, 240, 240, 0.93);
color: black;
border: 2px solid rgba(0, 0, 0, 0.25);
}*/
.sectionheader u.anchor{
text-decoration:none;
font-size: 17;
margin-left: 6;
}
.protocoldate{
padding: 0;
margin: 0;
border-bottom: 1px solid;
}
.tt_upcoming.sectionheader{
background-color: rgba(240, 240, 240, 0.93) !important;
color: black !important;
}
.capMainSection .sectionheader{ display:none;}
.leftColumn { float: left; width: 45%; padding: 15px 0 10px 20px;}
.rightColumn {
padding: 0;
position: relative; /* add this to make linkbutton position relative to parent*/
vertical-align: middle;
width: 50%;
float: right;
}
.rightColumn .rightGroup { padding-top: 10px; }
.rightGroup .multirow div { float: left; width: 245px; }
.content p { margin: 5px 0;}
.groupproto { padding-top: 4px;}
.groupproto .protocolname{
float: left;
width: 313px;
overflow: hidden;
height: 16px;
white-space: nowrap;
text-overflow: ellipsis;
display: block; }
.leftColumn .ellipsis { }
.leftColumn h3.label1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 7px;}
.show{ display: block;}
.groupproto { margin-bottom:5px; }
.lasActivity ul { padding-left: 18px !important;}
h3 { font-weight: 500; border-bottom: 1px solid #000; height: 16px; margin:5px 0 10px 0; text-transform: uppercase; font-size: 1.1em;}
h3.label1 { text-decoration: underline; border: 0;}
h5 { margin: 5px 0; font-weight: 600; font-size: 13px;}
.content { overflow: hidden;}
.downloadBriefcase { float: right;}
h3.normalCase { text-transform: none; border: 0;}
p.bold { font-weight: 600; font-size: 13px;}
.setupButton {
cursor: pointer;
background: #727272;
border: 0;
padding: 8px 15px;
color: #FFF;
margin: 3px 0;}
.onsiteLead span { font-weight: normal; }
.UPCOMING {
background: none;
position: absolute;
color: #858585;}
.UPCOMINGContent .leftColumn { padding-top: 30px;}
.UPCOMINGContent .rightGroup { padding-top: 27px; }
答案 0 :(得分：0)
您应该为数据布局使用表而不是div，因为它是表格数据（这不适用于常规页面布局）。问题不在于您的两列布局不起作用，而是您的布局是一条多行，每行都有两列。您可以在两列布局中重新组织布局。 一些布局建议：
<table>
<tr>
<td>
<h3>A title in the first column</h3>
<p>some text</p>
</td>
<td>
<h3>A title in the 2nd column</h3>
<p>some text</p>
</td>
</tr>
<tr>
<!-- put the other lines here -->
</table>
使用此布局，行将对齐。这是表格数据的正确选择。
<div><!-- the container -->
<ul style="float:left;"><!-- the left column container, using a class for csss is better -->
<li>
<h3>A title in the first column</h3>
<p>some text</p>
</li>
<!-- put the other lines for left column here -->
</ul>
<ul><!-- the right column container -->
<!-- same as for the left column -->
</ul>
</div>
使用此布局，行不会被分配。如果您认为您的数据是无序列表，那么这是正确的。
答案 1 :(得分：0)
看起来你把内容放在col1中，然后放在col2中，然后放在col1中等等。
如果内容高度不匹配，在小提琴中它们不匹配，那么您将获得两个内容块不匹配的“随机”空格。
解决此问题的最佳方法是首先填充第1列，然后填充第2列。这样，内容高度就不会成为问题。
答案 2 :(得分：0)
问题：
.leftColumn { float: left; width: 45%; padding: 15px 0 10px 20px;}
width : 45%占据了看不见的空间，为其分配了较小的年龄。
解决方案
.leftColumn { float: left; padding: 15px 0 10px 20px;border:1px solid #000}