关于div+css如何现实横排，请指教

weihanmingwhmwhm 2008-12-24 03:45:21
<asp:DataList id="DL_Style_2" RepeatColumns="1" RepeatDirection="Horizontal" RepeatLayout="table" width="99%" runat="server" cellspacing="5" cellpadding="0">
<ItemTemplate>
<div class="uc_lanmu_product_style_2" >
<ul float:left;>
<li class="uc_lanmu_product_style_2_box_1">
<p><a href="<%#GetUrl(Request.QueryString["menuid"],Request.QueryString["lanmuid"],DataBinder.Eval(Container.DataItem,"id").ToString())%>" target="<%=Target%>"><img src="<%#Get_Upload(DataBinder.Eval(Container.DataItem,"upload").ToString())%>" border="0" widht="100px" class="uc_lanmu_product_style_2_image" style="<%=ImageStyle%>" border="0" title="<%#DataBinder.Eval(Container.DataItem,"name")%>"></a></p>
<p align=center><a href="<%#GetUrl(Request.QueryString["menuid"],Request.QueryString["lanmuid"],DataBinder.Eval(Container.DataItem,"id").ToString())%>" target="<%=Target%>"><%#Get_title_num(DataBinder.Eval(Container.DataItem,"name").ToString())%></a></p>
</li>
<li ><%#ubb(DataBinder.Eval(Container.DataItem,"introduct").ToString())%></li>
<li style="clear:both;font-size:0px;line-height:0px;height:0px;"></li>
</ul>
</div>
</ItemTemplate>
</asp:DataList>
...全文
4187 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
joking520 2009-01-05
  • 打赏
  • 举报
 回复
<style>
.div1{width:150px;height:25px;border:1px solid #cccccc;float:left;margin:5px;line-height:25px;text-align:center}
</style>


<div class=div1>
文字一
</div>
<div class=div1>
文字二
</div>
<div class=div1>
文字三
</div>
<div class=div1>
文字四
</div>


专门接分来的。。
kinghome 2009-01-05
  • 打赏
  • 举报
 回复
定义好每个DIV 的宽度和高度 和 上下左右的距离 ，然后使用 float：left 属性 即可 整整齐齐的 自动横排 了


<div style="float:left;PADDING: 5px; margin:10px;width: 80px;height: 120px;overflow: hidden;">
文字文字文字1
</DIV>
<div style="float:left;PADDING: 5px; margin:10px;width: 80px;height: 120px;overflow: hidden;">
文字文字文字2
</DIV>
<div style="float:left;PADDING: 5px; margin:10px;width: 80px;height: 120px;overflow: hidden;">
文字文字文字3
</DIV>
<div style="float:left;PADDING: 5px; margin:10px;width: 80px;height: 120px;overflow: hidden;">
文字文字文字4
</DIV>
weihanmingwhmwhm 2008-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ChinaXtHuLang 的回复:]
CSS code
<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">
文字文字文字1
</DIV>
<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">
文字文字文字2
</DIV>
<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">
文字文字文字3
</DIV>
<div st…
[/Quote]

复制你这个测试，直接放上是横的，为什么插到我的页面上面却不行了哦．
weihanmingwhmwhm 2008-12-29
  • 打赏
  • 举报
 回复
各位，float：left,按这个方法排了，发现页面乱了，可能自己方法不对吧，有详细一点的讲解吗．
ChinaXtHuLang 2008-12-25
  • 打赏
  • 举报
 回复 


<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">

文字文字文字1

</DIV>

<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">

文字文字文字2

</DIV>

<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">

文字文字文字3

</DIV>

<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">

文字文字文字4

</DIV>

<div style="float:left;PADDING-RIGHT: 5px; PADDING-LEFT: 18px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">

文字文字文字5

</DIV>
kinghome 2008-12-25
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 layers2323 的回复:]
float：left
[/Quote]
同意
定义好每个DIV 的宽度和高度 和 上下左右的距离 ，然后使用 float：left 属性 即可 整整齐齐的 自动横排 了
layers2323 2008-12-25
  • 打赏
  • 举报
 回复
float：left
weihanmingwhmwhm 2008-12-25
  • 打赏
  • 举报
 回复
谢谢，我测试一下
www_7di_net 2008-12-24
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN">

<html><head>

<style type="text/css">



.main{

	width:80%;

	background:red;

	margin-left:auto;

	margin-right:auto;

}

.col1{

	float:left;		/*这个是关键的地方让col1往左浮动，这样它的后面（右边）就可以放置别的元素（可以是div图片文字等）*/

	margin-left:1px;/*与左边之间有些间隔*/

	width:50%;height:300px;

	border:1px solid yellow;

}

.col2{

	float:left;		/*这个是关键的地方 让col2也往左浮动，紧跟在col1的后面*/

	margin-left:1px;/*让col2和col1之间有些间隔*/

	width:49%;

	height:300px;

	border:1px solid yellow;

}

.colspan{clear:both}/*清除col1和col2的float,否则main的高度会出错 没有包住它里面的有float的元素*/





.a{

	width:90%;

	background:green;

	margin:0 auto;

}

.a1{

	width:47%;

	padding: 5px;

	background:#ccc;

	float:left;

	border:1px solid #999;

}

.a2{

	width:50%;

	padding: 5px;

	background:#ddd;

	float:left;

	border:1px solid #999;

}

</style>

</head>



<body>

<div class="main">main 我是包在外面的div

	<li class="col1">col1 我是第一列</li>

	<li class="col2">col2 我是第二列</li>

	<li class="colspan">用来清除浮动（清除float）</li>

</div>

<br>

<div class="a">

	<div class="a1">col1 我是第一列</div>

	<div class="a2">col2 我是第二列</div>

</div>

<br>

<div class="a">

	<div class="a1">col1 我是第一列</div>

	<div class="a2">col2 我是第二列</div>

</div>

</body>

</html>
jike0907 2008-12-24
  • 打赏
  • 举报
 回复
<li class=“left”></li>
……
<li></li>
其实好久用样式来控制就ok了
html+div+css初级入门到制作企业站视频课程
本套html,div&css;课程完全初级, 通过学习DIV+CSS, 了解分清html div css三者关联&作用, 通过一个企业站首页排版掌握html,div+css
html5下拉表单如何改为横拉,css+div导航下拉二级菜单竖排效果如何改为横排？
css+div导航下拉二级菜单竖排效果如何改为横排？0ruican8882013.06.18浏览1265次分享举报RT，在“下一站”有三个二级竖排菜单，如何能变为横排？困扰了我一天了，在网上找不到解决办法，谢谢高手指教了！请详细说明...
高档次自适应导航页HTML+CSS
index.css *{ margin: 0; padding: 0; font-family: "montserrat",sans-serif; box-sizing: border-box; } .services-section{ background: url(../bg.jpg); background-size: cover; padding: 110px 0; } ....
CSS集合
撰写时间：2022/1/23 transform: translateY(-110px);--y轴运动 overflow:hidden;-----------------------隐藏display:none;...style-----------------------放在div里面可以写css样式（行内样式） ...
《CSS那些事儿》读书笔记
暗灰色标记部分，是我自己的理解，有不对或要补充的地方，还请大家多多指教。 代码演示我统一放到了jsfiddle上，国内访问速度稍慢些，大家耐心点。或是大家知道国内有类似的在线调试网站，麻烦和我分享下，在此先谢...
ASP

28,391

社区成员

357,060

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章