通过CSS对齐我的Html内容

我的css有一个小问题，我正在尝试创建两列布局，我看到了内容之间的随机间隙。我无法正确解释，请检查我在JSFIDLE中创建的示例。你会明白的。右侧我正在尝试创建2列

这里是jsfiddle链接

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 &amp; 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 &amp; Benefits<br>Labor &amp; Human Rights</p>
                        <h5 class="auditor">C1 (Lead)</h5>
                        <p class="assignments">antidiscrimas<br>Labor &amp; Human Rights</p>
                        <h5 class="auditor">D1</h5>
                        <p class="assignments">antidiscrimas<br>Labor &amp; Human Rights<br>Wages &amp; 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 &amp; Human Rights</p>
                        <h5 class="auditor">M1</h5>
                        <p class="assignments">Labor &amp; Human Rights<br>Wages &amp; Benefits</p>
                        <h5 class="auditor">M2</h5>
                        <p class="assignments">Antidiscrimination<br>Labor &amp; Human Rights<br>Wages &amp; Benefits</p>
                        <h5 class="auditor">V1</h5>
                        <p class="assignments">Antidiscrimination<br>Labor &amp; Human Rights<br>Wages &amp; 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 &amp; Human Rights<br>Wages &amp; Benefits</p>
                        <h5 class="auditor">R1</h5>
                        <p class="assignments">antidiscrimas<br>Labor &amp; Human Rights</p>
                        <h5 class="auditor">R2</h5>
                        <p class="assignments">Labor &amp; Human Rights<br>Wages &amp; 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="&gt;" onclick="top.openPageURL('Pushinfolet?id=101652&amp;proc=146194&amp;flag=1&amp;emd=2&amp;accessflag=2&amp;edit_flag=D&amp;wrapper=no')" style="height: 558px;">                  </div>
            </div>
         </div>
      </div>
   </div>
</div>

---

对于数据布局，应该使用表而不是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>

第一列的标题
一些文本

---

使用此布局，行将不会对齐。如果你认为你的数据是一个无序列表，它是正确的。

< P>看起来你把内容放在COL1，然后在COL2中，然后在COL1等等。 如果内容高度不匹配，而小提琴中的内容高度不匹配，你将得到两块内容不匹配的“随机”空间

---

最好的解决方法是先填充列1，然后填充列2。这样，内容高度就不会成为问题。

问题：

.leftColumn { float: left; width: 45%; padding: 15px 0 10px 20px;}

width:45%

正在占用看不见的空间，请为其指定一个较小的%年龄

解决方案

.leftColumn { float: left;  padding: 15px 0 10px 20px;border:1px solid #000}

---

你能给问题所在的柱子一些颜色的区别吗came@Reshma：你能看到Yasmin SGM（Lead）和Leo GSM（Lead）之间的差距吗？尝试在CSS中使用更有组织的样式……HTML5有很多预定义的div来满足你的需要……！！：：）试试看，你肯定不需要使用表或列表，你不需要，但它的可读性和语义要好得多。你可以用div做任何事情，尤其是不可读的代码。有争议的是，当包含的数据不适合列表或表时，表或列表在语义上如何更好？您不应该使用表来控制页面的显示。内容真的是一个列表吗？你是对的，表格不是用于页面布局的，它是用于表格数据的，这里就是这样。你也可以说它是无序列表。不管怎么说，他的数据是SJ-B业务，这就是为什么我让他在表格或列表中选择。我同意这个问题显然是关于表格数据的，但我的观点是你的答案不清楚。这就好像表格应该用于总体布局一样。不过，我仍然不同意这是一份无序的清单。

.leftColumn { float: left;  padding: 15px 0 10px 20px;border:1px solid #000}