jsp div 布局中左边放图片右边放文字怎么布局?

yun_vip 2014-07-12 01:28:38





<!DOCTYPE html>

<html>

<head>

    <title></title>

<style>

    body{background-color: #666}

    .left{float:left;width:50%;background-color: aquamarine}

    .right{float:right;width:50%;background-color: #e8e8e8}

    .content{margin-left: 12px;}

</style>

</head>

<body>

    <div class="list card">

        <div class="left">

            <div><i><img src="img/goog-docs-doc-new.png" width="68px" height="68px"></i></div>

            <div style="margin-left:66px;margin-top: -33px;">客户在线量统计</div>

        </div>

        <div class="right">

           <ul class="content">

               <li>会员客户：<span class="calm">300{{}}</span></li>

               <li>试用客户：<span class="calm">15{{}}</span></li>

               <li>客户总数：<span class="calm">385{{}}</span></li>

           </ul>

        </div>

    </div>

</body>

</html>



           主要没有实现第一个div里面图片和文字的布局，样式也不是很协调 ！麻烦指导一下 谢谢！

...全文

11943 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

yun_vip 2014-07-14

打赏
举报

回复

引用 2 楼 yun_vip 的回复:

这是一个webApp 所以有点麻烦。。。

这个line-height属性放到这里不起作用的。。。


      <div><i><img src="img/goog-docs-doc-new.png" width="68px" height="68px"></i></div>       
      <div style="margin-left:66px;line-height:66px;">客户在线量统计</div>

皓月长空 2014-07-14

打赏
举报

回复

没有测试，按1楼所说的如果是图片和文字的显示问题，文字可设置行高，而图片则用绝对定位即可。

yun_vip 2014-07-14

打赏
举报

回复

这是一个webApp 所以有点麻烦。。。

皓月长空 2014-07-14

打赏
举报

回复

你得先设置高度再设置行高height:66px;line-height:66px;

qcxl 2014-07-12

打赏
举报

回复

你代码效果

左侧和右侧div高度不一致，并且左侧div中图片和文字布局没设置好，有点错位

下面思路供参考，大神们有更好的思路可以指点下，学习学习

：

保持左、右两个div高度一致，左侧div里面可以设置一个table，让table内容居中
类似下面这个效果

Web应用前端技术的探索与实践 1 1 前端开发那些事 1 2 怎样提高前端的质量和工作效率？ 1 附件（关于2011年工作的一点浅见） 3 3 探讨一些技术问题 4 3.1 Frameset和iframe 4 3.2 Frameset和Div两种方式的对比 5 3.2.1 frameset布局的优点 5 3.2.2 frameset布局的缺点 5 3.2.3 DIV传统布局与frameset相比的优点 5 3.2.4 DIV传统布局与frameset相比的缺点与解决办法 6 3.2.5 大量使用ajax的DIV局部页面，会遇到的一些难点 6 3.2.6 解决方法 6 3.2.7 结论 6 3.3 基于DIV的网页布局-模版的核心 7 3.3.1 概述 7 3.3.2 简单、直观的DIV布局 7 3.3.3 DIV布局问题的终极解决方案 9 3.3.4 解决DIV被撑爆的问题 12 3.3.4.1 DIV撑爆的问题 12 3.3.4.2 图片撑爆问题的解决办法 13 3.3.4.3 文字撑爆问题的解决办法 13 3.4 Java Web应用的DIV布局 14 4 主流邮件系统前端开发的研究 19 4.1 21cn企业邮 19 4.2 Sohu邮箱 21 4.3 网易邮箱 30 4.4 腾讯网络邮箱（foxmail） 40 4.5 新浪邮箱 47 4.6 关于邮箱业务的题外话 49 4.7 小结 51 5 一些应用的问题 51 5.1 21cn.com 51 5.2 综合管理平台 51 5.2.1 文件组织 51 5.2.2 UI 53 5.2.3 Jsp文件胡乱包含 53 6 前端组件及其研发的探索和实践 54 6.1 用户、应用 55 6.2 网站和web应用公共组件的层次 55 6.3 Web应用前端组件的研发原则 56 6.4 研发流程 56 6.5 常用前端组件的分析和研究 57 6.5.1 概述 57 6.5.2 通用组件 58 6.5.2.1 Accordion 58 6.5.2.1.1 效果 59 6.5.2.1.2 参数说明 60 6.5.2.2 Tab 61 6.5.2.2.1 效果 61 6.5.2.2.2 参数说明 64 6.5.2.2.3 事件说明 64 6.5.2.2.4 方法说明 65 6.5.2.2.5 属性说明 65 6.5.2.3 封装Accordion和Tab为Switchable 65 6.5.2.3.1 使用JQuery Tools构建 67 6.5.2.3.2 JQuery Tools的Switchable对Ajax的支持 68 6.5.2.3.3 使用JQuery Switchable 70 6.5.2.3.4 使用kissy Switchable 78 6.5.2.4 统计分析图表组件 94 6.5.2.4.1 应用实例1 95 6.5.2.4.2 应用实例2 97 6.5.2.5 DataGrid1-浏览表格数据 102 6.5.2.5.1 效果 103 6.5.2.5.2 参数说明 107 6.5.2.6 DataGrid2-可编辑cell 110 6.5.2.6.1 效果 110 6.5.2.7 DataGrid3-控制列是否显示 113 6.5.2.7.1 效果 113 6.5.2.8 Tree 116 6.5.2.8.1 效果1 116 6.5.2.8.2 效果2 117 6.5.2.9 树表组件 121 6.5.2.9.1 TABLETREE4J 121 6.5.2.9.2 JQuery TreeGrid 124 6.5.2.10 Combo扩展1-去除IE6下穿透层的bug 129 6.5.2.10.1 效果 130 6.5.2.11 Combo扩展2-新样式、可多选 131 6.5.2.11.1 效果 131 6.5.2.12 Combo扩展3-ComboGrid 134 6.5.2.12.1 效果 134 6.5.2.13 Combo扩展4-ComboTree 137 6.5.2.13.1 效果 137 6.5.2.14 日期-时间选择 139 6.5.2.14.1 基于JQuery EasyUI的日期选择组件 139 6.5.2.14.2 My97DatePicker 142 6.5.2.15 TimeSpinner 146 6.5.2.15.1 效果 146 6.5.2.15.2 应用 147 6.5.2.16 NumberSpinner 148 6.5.2.16.1 效果 148 6.5.2.17 MenuButton 149 6.5.2.17.1 效果 149 6.5.2.18 分页组件Pagination 151 6.5.2.18.1 效果 151 6.5.2.18.2 参数说明 152 6.5.2.19 文件上传组件 153 6.5.2.19.1 uploadify 153 6.5.2.19.2 swfUpload 159 6.5.2.20 消息提示、弹出广告组件 162 6.5.2.20.1 效果 162 6.5.2.20.2 方法说明 165 6.5.2.20.3 扩展说明 166 6.5.2.21 Panel组件 166 6.5.2.21.1 效果 166 6.5.2.21.2 参数说明 168 6.5.2.21.3 事件说明 169 6.5.2.21.4 方法说明 170 6.5.2.22 Window组件 170 6.5.2.22.1 效果 170 6.5.2.22.2 使用说明 172 6.5.2.23 Form数据验证 173 6.5.2.23.1 效果 173 6.5.2.24 内容自动完成、Suggest 174 6.5.2.24.1 效果 175 6.5.2.24.2 应用说明 176 6.5.2.25 WYSIWYG在线Html内容编辑器 179 6.5.2.25.1 SinaEditor 179 6.5.2.25.2 CKEditor 181 6.5.2.26 JMesa 184 6.5.2.26.1 效果 185 6.5.2.26.2 一个较为复杂的应用实例 185 6.5.3 综合实例 191 6.5.3.1 Portal 191 6.5.4 展望 195 7 前端页面的优化工作概论 195 7.1 前端页面优化的策略 196 7.2 网站加速的主要方法 198 7.2.1 Web层 198 7.2.2 应用层 203 8 总结 205

DivCssData(关联网页自动切片生成Div+Css软件数据库版)是一款只需要导入效果图，拉框线就可以生成标准的兼容性的DIV+CSS，同时集成图片切换、图片滚动、滑动门TAB效果、视频代码、表单、网页控件、JAVASCRIPT验证、下拉菜单等特效，同时集成了数据库调用功能（可以制作asp+access、asp.net+sql server、php+mysql、jsp+oracle语言和数据库的网站），还拥有智能规划、自动划分切片、文字识别等功能，大大方便了网站开发，可以让您在短时间内做出标准兼容各个浏览器的数据库网站。本软件是网页制作、网页切片、企业网站、门户网站网页布局开发、批量做模板的最佳工具。在安装或操作过程中，有不清楚的地方，请与我们联系，我们将竭诚为您服务！联系方式：官网：http://www.guanlian8.com 联系电话：13982056253 联系QQ：348961183 112528355 邮箱：cddxwfl@qq.com

运用HTML、CSS、JavaScript、jQuery等相关技术和DreamweaverCS6工具设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交相关信息、游客可以浏览网站信息。网站具有图片轮播效果、鼠标对图片的进入和移出特效、点击小图放大图片特效、文字超链接、图片超链接、锚链接、菜单栏、景点预定须知、景点简介、交通指南、用户点评功能、div分块、CSS样式、下拉菜单、景点门票预订、酒店预订，表单输入验证功能，提交后提示预定信息，导航栏功能、AJAX城市天气预报查询功能，网站界面美观，布局配色合理，方便和吸引用户的使用。包含10个以上自己设计的超链接页面。具体要求为： (1) 网站主题为爱旅行旅游网站，网站标志语、界面主色调与网站主题相匹配，界面布局设计美观、大方、合理，要求用到HTML、CSS、JavaScript和jQuery网页特效、采用JavaScript和jQuery技术编程。 (2) 用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交相关信息、游客可以浏览网站信息，网站具有图片轮播效果、鼠标对图片的进入和移出特效、点击小图放大图片特效、淡入淡出特效、滑动特效、文字超链接、图片超链接、锚链接、菜单栏、景点预定须知、景点简介、交通指南、用户点评功能、div分块、CSS样式、下拉菜单、景点门票预订、酒店预订，表单输入验证功能，提交后提示预定信息，导航栏功能、AJAX城市天气预报查询功能，，10个以上自己设计的超链接页面。

运用HTML、CSS、JavaScript、jQuery等相关技术和DreamweaverCS6工具设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交相关信息、游客可以浏览网站信息。网站具有图片轮播效果、鼠标对图片的进入和移出特效、点击小图放大图片特效、文字超链接、图片超链接、锚链接、菜单栏、景点预定须知、景点简介、交通指南、用户点评功能、div分块、CSS样式、下拉菜单、景点门票预订、酒店预订，表单输入验证功能，提交后提示预定信息，导航栏功能、AJAX城市天气预报查询功能，网站界面美观，布局配色合理，方便和吸引用户的使用。包含10个以上自己设计的超链接页面。具体要求为： (1) 网站主题为爱旅行旅游网站，网站标志语、界面主色调与网站主题相匹配，界面布局设计美观、大方、合理，要求用到HTML、CSS、JavaScript和jQuery网页特效、采用JavaScript和jQuery技术编程。 (2) 用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交相关信息、游客可以浏览网站信息，网站具有图片轮播效果、鼠标对图片的进入和移出特效、点击小图放大图片特效、淡入淡出特效、滑动特效、文字超链接、图片超链接、锚链接、菜单栏、景点预定须知、景点简介、交通指南、用户点评功能、div分块、CSS样式、下拉菜单、景点门票预订、酒店预订，表单输入验证功能，提交后提示预定信息，导航栏功能、AJAX城市天气预报查询功能，，10个以上自己设计的超链接页面。

1．本书1~16章所附代码的运行环境操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：Microsoft Visual Studio 2005 数据库：SQL Server 2005 Web服务器：IIS 5.1及以上版本 2．本书17~27章所附代码的运行环境数据库采用MySQL 4.0及以上版本服务器采用Tomcat 5.0 及以上版本开发工具采用Eclipse 3.1以上版本 3．本书所附光盘范例第1章（/C01/） JsWeb 传统的JavaScript模式实现刷新 IframeWeb 基于框架的不刷新模式 AjaxWeb 基于Ajax的Web 2.0模式的刷新模式 AsyncAjaxSample Ajax异步调用的完整示例第2章（/C02/） 2.1.htm 3段JS使用形式 2.2.htm 不同浏览器使用“中文形式的日期 6.4.htm 将一个小数四舍五入到指定位数 6.5.htm 以从大到小冒泡排序法为例 6.6.htm 使用Navigator的属性进行浏览器检测 6.7.htm 列出了一些可能的浏览器类型 6.8.htm Screen对象的使用 6.9.htm 用来检测浏览器窗口的实际大小 6.10.htm 可以设置文字大小随窗口大小而改变 6.11.htm 客户端性能检测 6.12.htm 个浏览器按键模拟的示例第7章（/C07/） 7.1.htm 演示了编码和译码使用的方法 7.2.htm 演示了exec方法的用法 7.3.htm 对RegExp对象的综合举例 7.4.htm 演示了字符匹配的使用情况 7.5.htm 正则匹配举例 7.6.htm 用 ^ 匹配目标字符串的开始位置 7.7.htm 用 $ 匹配目标字符串的结尾位置 7.8.htm 用 \b 匹配一个字边界第8章（/C08/） 8.1.htm XHTML中的事件绑定 8.2.htm 一个表单按钮的click处理器 8.3.htm 测试事件处理器的作用域 8.4.htm 绑定方法的使用 8.5.htm 使用一段文本来接收按键点击 8.6.htm 绑定处理器至对象 8.7.htm 网页中禁止鼠标右键的操作第9章（/C09/） 9.1.htm 实现了在网页上显示当前时间的功能 9.2.htm 一个显示当前日期和星期的完整示例 9.3.htm 同时显示日期、时间和星期 9.4.htm 一个分时段问候的例子 9.5.htm 实现了显示不同地区的时间代码 9.6.htm 实现悬浮时钟效果的完整代码 9.7.htm 计算器的完整程序 9.8.htm 可以进行四则混合运算的计算器 9.9.htm 打字效果 9.10.htm 实现图片的随机选择 9.11.htm 一个基本下拉菜单 9.12.htm 下拉菜单 9.13.htm 实现渐显效果的下拉菜单的完整代码 9.14.htm 模拟系统菜单 9.15.htm 图片显示窗口的完整代码 9.16.htm 远程控制窗口 9.17.htm 实现菜单滑动效果的完整代码 9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码第10章（/C10/） ReturnText Ajax返回字符串数据 ReturnXML Ajax读取XML类型数据 PostUser Ajax提交数据更新服务器内容 xmlhttpWeather 获取天气网站的内容第11章（/C11/） 11.1.htm 采用标准的DOM方法创建一个表格并将其插入到页面中 11.2.htm 添加单元格 11.3.htm 删除表格的第一行和第一列 11.4.htm 实现单元格行顺序的改变 dynamicTable 完整的Ajax调用DOM的实例第12章（/C12/） 12.1.htm 一个在元素内定义CSS的范例 12.2.htm 一个在Head元素内定义CSS的范例 12.3.htm 引用CSS文件的页面 12.4.htm 通过下拉列表框来改变<div>容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在网页中应用投影的范例 12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu 使用Ajax+CSS实现动态菜单效果第13章（/C13/） 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL样式表的例子 13.3.htm Internet Explorer 浏览器中XML的应用 13.4.htm 直接对XML文档进行添加、删除和显示数据的操作 13.5.js Mozilla 浏览器中xml的应用 13.5.xml 简单的xml文件 13.6.htm 格式化输出xml文件 13.7.htm 一个添加/删除记录的例子第14章（/C14/） MenuSample 级联菜单实例 PageSample 实现Ajax翻页效果数据库备份本章实例所需要的数据库第15章（/C15/） AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用Open Rico实现动态调色板 RicoDrag 使用Open Rico实现可拖拽的层 WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏第16章（/C16/）留言板源代码所有留言板实例的源代码数据库备份留言板数据所需要的数据库第17章（/ch17）程序描述：本章介绍开发AJAX的开源框架GWT（Google Web Toolkit）。最典型的Google Maps和Gmail等Google服务也正是基于此框架开发的。读者将能够快速掌握GWT的各种开发所涉及到的内容。 /firstgwt/FirstGWT.html 第一个GWT示例 /calculator/TexCalculator.html 个税计算器第18章（/ch18）程序描述：本章将介绍 GWT应用中高级应用的部分，包括各中组件和布局、如何发送XMLHttpRequest请求，以及如何解决浏览器历史记录问题等等，同时读者还将详细的了解RPC应用的开发过程。 /xmlsample/AjaxSample.html 读取XML文件 /history/HistoryExample.html 保存历史记录 /rpc/RPCExample.html RPC调用第19章（/ch19）程序描述：本章模仿Google ig，使用Ajax技术实现一个个性化主页系统。通过拖拽方式设置主页，当完成拖拽窗口时，自动保存布局，使用户可以随时根据喜好来设置布局。 /login.jsp 登录页面 /homepage.jsp 自定义主页 /all.css CSS样式表文件 /js JavaScript脚本文件 /graphics 系统使用的图片文件夹第20章（/ch20）程序描述：本章使用Prototype封装的Ajax对象实现上传文件时显示进度条的功能。当上传文件时，客户端同时显示文件上传的进度，从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件后台处理页面 / prototype.js prototype框架类库文件第21章（/ch21）程序描述：本章将实现通过滑块来显示分页数据的功能。传统的分页方式，多数是通过单击按钮的方式来显示分页的。利用Ajax可以通过使用滑块的滑动来选择所显示的分页，这种拖拽的方式有很好的用户体验。 /test.html 滑动显示分页页面 /js JavaScript脚本文件 /img 系统使用的图片文件夹第22章（/ch22）程序描述：本章将利用开源框架Prototype，讲述如何在网页中实现Windows关机效果，使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件第23章（/ch23）程序描述：本章将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时，自动向服务器发送请求，查询该菜单下的子菜单，并在客户端显示子菜单，而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree.jsp 静态树 /dynamicTree.jsp 动态树 /css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件第24章（/ch24）程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存到数据库。打开阅读RSS时，自动获取最新的RSS内容，而无需刷新页面。 /RSSReader.jsp RSS阅读器 /rss.js JavaScript脚本文件第25章（/ch25）程序描述：本章将仿照Google Suggest，使用Ajax技术实现动态获取搜索提示的功能。当输入搜索关键字时，自动向服务器发送请求，查询相关的关键字，并及时提示用户可输入的关键字。 /suggest.html 搜索提示 /ajax_search.js JavaScript脚本文件第26章（/ch26）程序描述：本章将使用Ajax技术实现无刷新即可浏览图片的相册。浏览图片时，自动向服务器发送请求，查询该类别下的照片，并显示到客户端。用户也可以根据喜好随时改变相册的风格。浏览相册的整个过程无需刷新页面。 / show.jsp 图片浏览 /all.js JavaScript脚本文件 /new.css CSS样式表文件 /styles.css CSS样式表文件 /images 图片文件第27章（/ch27）程序描述：本章将使用Ajax技术实现聊天室程序。使用Ajax来动态获取聊天记录，可以避免因屏幕不断刷新而出现的闪动现象。另外，使用Ajax可以减少服务器端的负荷，对这种客户端与服务器端通信量极大的程序是非常有意义的。对用户来讲，有很好地用户体验。 /welcome.jsp 聊天室欢迎页面 /room.jsp 聊天室页面 /ajax_chat.js JavaScript脚本文件 /styles.css CSS样式表文件

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章