html+css实现横排显示一系列图片,超出框格的自动换到下一行
由于我使用了模板,{userName}和{avatar}是通过javascript写的函数传过来的数组里的一系列数据,现在图片是竖排显示的,就是每行一张图,要怎么实现变成...
由于我使用了模板,{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;
} 展开
我现在的代码:
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;
} 展开
7个回答
展开全部
因为你用的模板,传的是一个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;
}
========================================
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;
}
博思aippt
2024-07-20 广告
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员,对于Word文档生成PPT的操作,我们有以下建议:1. 使用另存为功能:在Word中编辑完文档后,点击文件->另存为,选择PowerPoint演示文稿(*.pptx)格式,即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
应该有设置你那个输出的图片的css的吧 或者你输出的时候加个DIV 然后在div上加上浮动,他就会横排,也会自动换行,要好看一点的话再加点margin什么的
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
实现你要的效果很简单的,你把外面的div宽度改大些。还有很简单的布局就可以实现你要的效果。思路:外面一个div,里面是img,设置img的宽度,高度,再有margin。搞定
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
相当简单
<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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询