html+css实现横排显示一系列图片，超出框格的自动换到下一行

Question

由于我使用了模板，{userName}和{avatar}是通过javascript写的函数传过来的数组里的一系列数据，现在图片是竖排显示的，就是每行一张图，要怎么实现变成横排？
我现在的代码：
html：
<div class = "showUser" >
<div class = "userList">
<a href="./index.php?id={uid}">{userName}</a>
<a href="./index.php?id={uid}" ><img src = "/team5/v0.4/src/upload/_static/picture/avatar/{avatar}"></a>

</div>
</div>

CSS:
.showUser {
float:left;
width:100px;
background:#ccc;
overflow:hidden;
white-space:nowrap;
margin:10px;

}

.userList{
float:left;
}

javascript里的函数：

function getName()
{
global $DB,$mysql_prefix;

$nameArr = array();

$con = mysql_connect("localhost", "root", "admin");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

$db_selected = mysql_select_db("micblog",$con);
$sql = "SELECT `UID`, `AVATAR`, `USERNAME` FROM `WEIQU_USERINFO`";

$result = mysql_query($sql,$con);

while($Re = mysql_fetch_array($result))
{
$nameArr[] = array(
"uid" => strip_tags($Re['UID']),
"userName" => strip_tags($Re['USERNAME']),
"avatar" => strip_tags($Re['AVATAR']),
);
}

$return['Name'] = $nameArr;

return $return;
}

Answer 1

因为你用的模板，传的是一个array，每循环一次生成一个DIV，所以要把循环开始<!-- BEGIN nameArr.Name -->放在<div class = "userList">前面，改成这样
========================================
html：
<div class="showUser">
<fieldset>
<legend>俱乐部成员</legend>

<!-- BEGIN nameArr.Name -->
<div class = "userList">
<p> </p>
<p><a href="./index.php?id={uid}">{userName}</a></p>
<!-- IF avatar = "" -->
<p><a href="./index.php?id={uid}" ><img src = "/team5/v0.6/upload/_static/picture/avatar/default.jpg"></a></p>
<!-- ELSE -->
<p><a href="./index.php?id={uid}" ><img src = "/team5/v0.6/upload/_static/picture/avatar/{avatar}"></a></p>
<!-- ENDIF -->
</div>
<!-- END nameArr.Name -->
</fieldset>
<div class="clear"></div>
</div>
==========================================
css：
.showUser{
width:780px;
padding:10px;
}

.showUser legend {
margin-bottom:20px;
font-size:200%;
}
.userList{
margin-bottom:5px;
word-break:break-all;
word-wrap:break-word;
float:left;
}

.userList img {
margin:5px 19.5px;
border:4px solid #d7e1ed;
display:block;
}

.userList a {
margin:5px 19.5px;
color:#444;
text-decoration:none;
}

.userList a:hover {
color:#888;
text-decoration:none;
}
===========================================
function getName()
{
global $DB,$mysql_prefix;

$nameArr = array();

$con = mysql_connect("localhost", "root", "admin");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

$db_selected = mysql_select_db("micblog",$con);
$sql = "SELECT `UID`, `AVATAR`, `USERNAME` FROM `WEIQU_USERINFO`";

$result = mysql_query($sql,$con);

while($Re = mysql_fetch_array($result))
{
$nameArr[] = array(
"uid" => strip_tags($Re['UID']),
"userName" => strip_tags($Re['USERNAME']),
"avatar" => strip_tags($Re['AVATAR']),
);
}

$return['Name'] = $nameArr;

return $return;
}

Answer 2

应该有设置你那个输出的图片的css的吧 或者你输出的时候加个DIV 然后在div上加上浮动，他就会横排，也会自动换行，要好看一点的话再加点margin什么的

Answer 3

实现你要的效果很简单的，你把外面的div宽度改大些。还有很简单的布局就可以实现你要的效果。思路：外面一个div，里面是img，设置img的宽度，高度，再有margin。搞定

Answer 4

1.利用Dreamweaver新建一个html页面

2.在body里面输入代码

<ul>

 <li>你好</li>

<li>小鱼</li>

<li>小小</li>

</ul>

3.默认的样式是这样的

4编辑li标签的css样式

5float:left代表的是元素左对齐。这样li标签就可以横排显示了，list-style:none用来去除li标签前面的小圆点。最终浏览器里面的效果如下图所示

Answer 5

相当简单
<div style="width:100%">
<div class = "showUser" >
<div class = "userList"><a href="./index.php?id={uid}">{userName}</a><a href="./index.php?id={uid}" ><img src = "/team5/v0.4/src/upload/_static/picture/avatar/{avatar}"></a></div>
</div>
<div style="clear:both"></div>
</div>