Question

有人可以帮我这个.. 我正在使用float：left for id = row1但是为什么它不会被alinged。

对于每个列表，有两列数据使用div，两个列表应该左对齐，而不是在另一列之下。

<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，并将显示器设置为内联块。

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>

浮动：离开不起作用

1 个答案: