让多个div在同一行显示的样式及html代码

实现多个div在同一行显示的应用还是比较广泛的,于是做了个示例,初学者可以参考下,希望对大家有所帮助

 

以下为css样式:

复制代码
代码如下:

div{
margin-bottom: 10px;
clear:both;
word-break:break-all;
word-wrap:break-word;
}

 

复制代码
代码如下:

<pre name="code" class="css"><!--width指定每个div占据的宽度--></pre& gt;.custom_div{height: 23px;width: 50px;line-height: 23px;float: left;}
<pre></pre>

以下为html代码:
[code]
<pre name="code" class="html">
<div id="pid">
<div id="d1" class="custom_div">jelly1</div>
<div id="d2" class="custom_div">jelly2</div>
<div id="d3" class="custom_div">jelly3</div>
</div></pre>

时间: 2024-11-08 21:12:17

让多个div在同一行显示的样式及html代码的相关文章

td中我想让div和span在一行显示,怎么解决?

问题描述 我想让div和span在一行显示,怎么解决<html><head></head><body> <table border='1'> <tr> <td>a</td> <td ><div>div</div><span>span</span></td> </tr> <tr> <td>b</td&

java技术-td中我想让div和span在一行显示,怎么解决?

问题描述 td中我想让div和span在一行显示,怎么解决? 我想让div和span在一行显示,怎么解决 代码如下: <table border='1'> <tr> <td>a</td> <td ><div>div</div><span>span</span></td> </tr> <tr> <td>b</td> <td>c&l

CSS3网页制作教程:overflow属性超过一行显示省略号

文章简介:overflow属性应用-不换行,超过一行显示省略号. overflow属性-原本是ie浏览器独自开发的属性,由于在css3中被采用,得到了其他浏览器的支持. 指定对于盒内容纳不下的内容显示的方法. Overflow:hidden 对于超出容纳范围的文字会被隐藏. Overflow:scroll div元素出现固定的水平滚动条与垂直滚动条 Overflow:auto 当文字超出是根据需要才会出现水平滚动条或者垂直滚动条 Overflow:visible 则显示效果与不使用overflo

求救:我用了 JSTL 显示出了商品目录,但它却是一行显示.

问题描述 我的问题是如何将其改成每一行显示4个商品而且想要4行显示.<tableborder="0"><tr><c:choose><c:whentest="${requestScope.itemList[0].GOODS_NUM==null}"><tr><tdwidth="700"height="300"align="center">没

ASP.NET 2.0数据教程之三十一:使用DataList来一行显示多条记录

返回"ASP.NET 2.0数据教程目录" 导言 在前两章的做的DataList的例子里我们都是使用单列的 HTML<table>来显示数据.而自定义使DataList将数据显示在多列多行的 table里也非常容易.而且还可以以单行多列来显示数据. 我们可以通过 RepeatColumns和RepeatDirection属性来自定义DataList.这两个属性决定了数据 显示时候的列数和方向(水平或垂直).图1是以一个3列的table来显示product信息 的DataLi

html5-如何做到微信公共号上那种“一句话+图片”在一行显示的效果?

问题描述 如何做到微信公共号上那种"一句话+图片"在一行显示的效果? 不知道怎么做到那种效果?我现在的做法是 在一行放 两个标签(input和img),然后在两个标签里都加入onclick. 但是这么做排版难度太大了,无法做到微信公共号的那种显示效果. 求助一下如何那样做? 解决方案 一个input标签只能有一个value,你自己可以测试一下.如果你需要实现你所说的效果,为什么非要用2个value?(df8888.com)你可以给这个input自定义一个属性,然后你这个值放这个属性里面

div布局-c# 怎样在后台div的状态是显示或隐藏?

问题描述 c# 怎样在后台div的状态是显示或隐藏? c# 怎样在后台div的状态是显示或隐藏?急用,请各位大仙施以援手.谢谢. 解决方案 增加div增加runat="server"属性,就可以在代码里面通过id引用到,你设置xxx.Visible=true/false就可以显示或者隐藏了 解决方案二: aspx页面代码: <div id="text" runat="server"> aaaa </div> <asp

jquery控制两个div中二级分类显示

问题描述 jquery控制两个div中二级分类显示 <div class="n_nav clearfix">这个里面是一级分类 <p class="navigation_column">型号</p><ul class="ul2">这个里面放的是二级的分类 想问的就是如何能够控制二级分类的显示问题, 解决方案 不知是不是你想要的,可以粘过去试试 <%@ page language="j

html-js动态生成的div在ie9下显示正常而在ie8下显示错位

问题描述 js动态生成的div在ie9下显示正常而在ie8下显示错位 html代码如下: js代码如下: function logIn(){ var new_page=document.createElement("div");//创建遮蔽层div new_page.style.position="absolute"; new_page.style.top=0; new_page.style.left=0; new_page.style.width=document