我想把所有这些divs并排排列

时间:2015-09-03 20:43:48

标签: jquery html css

这是我的CSS。我尝试使用position relative,然后将“x%”保留为“x%”:

#africa{width:16%; height: 20%; background-color:#33CC33;display: none;}
#asia{width:16%; height: 20%; background-color: #FF6600;display: none; position:}
#australia{width:16%; height: 20%; background-color: #FF5050;display: none;}
#europe{width:16%; height: 20%; background-color: #666699;display: none; }
#north-america{width:16%; height: 20%; background-color: #CC0000;display: none; }
#south-america{width:16%; height: 20%; background-color: #003300;display: none; }

#africa1{width:16%}
#asia1{width:16%}
#australia1{width:16%}
#europe1{width:16%}
#na1{width:16%}
#sa1{width:16%}

这是HTML:

<button id="africa1">Africa</button>
<div id="africa"></div>
<button id="asia1">Asia</button>
<div id="asia"></div>
<button id="australia1">Australia</button>
<div id="australia"></div>
<button id="europe1">Europe</button>
<div id="europe"></div>
<button id="na1">North-america</button>
<div id="north-america"></div>
<button id="sa1">South-america</button>
<div id="south-america"></div>

我一直试图找出这个问题近两个小时。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

确保你漂浮你的div。

在您的css float:left;中添加要并排显示的每个元素。

你能说出你想要的样子吗?我有点困惑......你想要div中的按钮吗?或者你是否试图将div用作间隔符?如果是这种情况,我建议在按钮上使用填充或边距