Question

好的，所以我正在制作一个仅供个人使用的小布局，我希望并排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>

问题是柱子堆叠在一起，而不是并排，是否有人能够在这里帮助我？感谢。

Answer 1

将列留下浮动！

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

并排获取列

1 个答案: