Question

如何按照正确的顺序设置 div tag 的位置，例如 table 。

<html>
<head><title> .</title>
<link rel="stylesheet"  type="text/css" href="style/main.css"/>
<script type="text/javascript" src="script/ajax.js"></script>
 <script type="text/javascript" src="script/validate.js"></script>
<script type="text/javascript" src="script/date-picker.js"></script>
</head>
<body>
<div onclick="show_tb()"style="width:70%;float:left;" class="title_mrwat" >

NEW MARWAT OIL TRANSPORTER
</div>
<div style="width:30%;float:right;">
<address>
Address:P/O Box 564, Landekotal Peshawar<br />
Phone: +12 34 56 78
</address>

</div>

<div style="width:50%;float:left;">
<img src="images/pso.jpg" height="45" width="45" />
<img src="images/total.jpg" height="50" width="55" />
<img src="images/shell.jpg" height="50" width="45" />
<img src="images/caltex.jpg" height="35" width="35" />
<img src="images/attock.jpg" height="40" width="40" />

</div>


<div style="width:50%;float:right;"id="tb">
<input  type="button" value="product"onmouseover="className='menuon';" onmouseout="className='menuoff';" onclick="loadXMLDoc('product/','formTag' ,'')" value="product">
<input   type="button" value="owner" onclick="loadXMLDoc('owner/','formTag')" value="shipment" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input  type="button" onclick="loadXMLDoc('vehicle/','formTag')" value="vehicle" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input   type="button" onclick="loadXMLDoc('route/','formTag')" value="route" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input  type="button" value="shipment" onclick="loadXMLDoc('ship/','formTag')" value="shipment" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input type="button" id="bt" value="report" onclick="show_form()" style="background-color:#E6E6DC;" >
</div>

<div id="responseTag" class="show_rpt" style="width:100%;">

</div>

<div id="div_added" class="div_add">
</div>
<div id="formTag">


</div>


</body>
</html>

Answer 1

对所有div使用相同的float方向。

<div style="width:50%;float:left"> first </div>
<div style="width:50%;float:left"> second </div>

将创建两个div浮动。但是你需要小心宽度：50％，它可能无法正常工作。并且你需要在每个“行”之后用clear清除：left / right / both。

Answer 2

您可以使用CSS

更改<div>的显示类型

display:table;

默认情况下，<div>是一个块元素，它在CSS

中

display:block;

您可能还需要为<div>和<tr>添加<td>

如何使用像表格这样的div标签

2 个答案: