Question

我需要使用此HTML

并排放置几个正方形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<style type="text/css">
.block{
height:20px;
width:20px;
background-color:blue;
float:left;
margin-right:3px;
}
</style>
 </head>

 <body>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 </body>
</html>

但是我使用一个名为Corda的应用程序从HTML生成PDF，它不支持css float属性。有没有其他方法可以使用其他css属性实现相同的效果？（Corda只支持基本的css标签）

Answer 1

您可以使用display：inline将它们彼此相邻。 display：inline-block会使它们的行为更像标准的<div>，但不应该是ie7或更低。

Answer 2

使用span代替div属性，这不会产生换行符

Answer 3

display: inline-block;
/* Or */
display: table-cell;

是您最好的选择。不幸的是，较低的IE会不喜欢两者。

在不使用css float的情况下并排定位div

3 个答案: