0

好的，所以我正在制作一个仅供个人使用的小布局，我想要 5 列并排。到目前为止，我有以下内容；

<center>

<!DOCTYPE html>
<html>
<body>

<body style="background-color:#B0B0B0;">

</body>
</html>



<br><br>

<!DOCTYPE html>
<html>
<body>

<div style="font-family:verdana;padding:25px;border-radius:70px;border:8px solid black; width:800px; background-color:#D8D8D8;">

<iframe src="http://free.timeanddate.com/clock/i3nhi1p2/n889/fn17/fs20/tc777/ftb/bo2" frameborder="0" width="146" height="29"></iframe>

<br><br><br>


<style>

#columns {
    width: 250px;
}

#columns .column {
    position: relative;
    width: 46%;
    padding: 1%;
    border: solid 1px #000;
}

#columns .center {
    float: center;
}

</style>

<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
<div class="center column">
TEXT GOES HERE
</div>
<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
</div>
<br><br>

</center>
</body>
</html>


</div>

</body>
</html>

</center>

问题是柱子彼此堆叠，而不是并排，有人可以在这里帮助我吗？谢谢。

4

1 回答 1

0

向左浮动列！

#columns .float {
    position: relative;
    width: 46%;
    padding: 1%;
    border: solid 1px #000;
}
于 2013-05-30T23:54:47.030 回答