html - 浮动：左不工作

Question

有人可以帮我解决这个问题吗？我正在使用 float:left 来表示 id =row1 但为什么它没有得到 alinged。

每个列表有两列数据使用 div ，两个列表都应该向左对齐，而不是彼此下方。

http://jsfiddle.net/c6242/1878/

<style>
#row1{
float:left;
}
</style>


<style>
.col1{

margin-left:50px;
width:150px;
border:1px solid;
border-color:red;
}
</style>

<style>
.col2{

margin-left:100px;
width:150px;
border:1px solid;
border-color:red;
}
</style>

<!--one coloum-->
<div class="col1" id="row1">Sr No:</div>
<div class="col1">Entry Date:</div>
<div class="col1">Name</div>
<div class="col1">Phone No:</div>
<div class="col1">Email ID:</div>
<div class="col1">MRF Code:</div>
<div class="col1">Location:</div>
<div class="col1">Total Exp:</div>
<div class="col1">Last Organisation:</div>
<div class="col1">Current CTC:</div>
<div class="col1">Notice Period:</div>
<div class="col1">Source:</div>

<!--second column both needs to be side by side-->
<div class="col1" id="row1">Sr No1:</div>
<div class="col2">Entry Date1:</div>
<div class="col2">Name1</div>
<div class="col2">Phone No1:</div>
<div class="col2">Email ID1:</div>
<div class="col2">MRF Code1:</div>
<div class="col2">Location1:</div>
<div class="col2">Total Exp1:</div>
<div class="col2">Last Organisation1:</div>
<div class="col2">Current CTC1:</div>
<div class="col2">Notice Period1:</div>
<div class="col2">Source1:</div>


</body>

任何帮助表示赞赏..

Answer 1

这绝不是做你想要在这里实现的最佳方式 - 你最好查看表格而不是 div。但是如果你真的打算保持这种结构，你需要一个围绕每一列的包装 div，并将显示设置为 inline-block。

http://jsfiddle.net/c6242/1880/

<!--one coloum-->
<div style="display:inline-block">
<div class="col1" id="row1">Sr No:</div>
<div class="col1">Entry Date:</div>
<div class="col1">Name</div>
<div class="col1">Phone No:</div>
<div class="col1">Email ID:</div>
<div class="col1">MRF Code:</div>
<div class="col1">Location:</div>
<div class="col1">Total Exp:</div>
<div class="col1">Last Organisation:</div>
<div class="col1">Current CTC:</div>
<div class="col1">Notice Period:</div>
<div class="col1">Source:</div>
</div>

<!--second column both needs to be side by side-->
<div style="display:inline-block">
<div class="col2" id="row1">Sr No1:</div>
<div class="col2">Entry Date1:</div>
<div class="col2">Name1</div>
<div class="col2">Phone No1:</div>
<div class="col2">Email ID1:</div>
<div class="col2">MRF Code1:</div>
<div class="col2">Location1:</div>
<div class="col2">Total Exp1:</div>
<div class="col2">Last Organisation1:</div>
<div class="col2">Current CTC1:</div>
<div class="col2">Notice Period1:</div>
<div class="col2">Source1:</div>
</div>

</body>