浮动：左不工作

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的。但是如果你确实想要保持这种结构，你需要在每一列上都有一个wrapper div，将显示设置为内嵌块。

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>