微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

小菜请教大家一个问题。_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:25:05
原创
1153人浏览过

我在团购网、聚划算、淘宝上看到他们商品展示都是一块一块的，左右和上下都有空隙，整个商品展示的总宽度都是和上边标题栏或导航栏的宽度都是一样的。可是我自己做的时候总是和上边的对不齐，要不就是差一点，要不就是被挤到了下一行，我用的是margin-right设置空隙的大小。想问问大家们有没有什么更好的方法达到这样的效果，最好有代码发上来看一下。谢谢大家。


回复讨论(解决方案)

对于宽度的控制问题
仔细计算下  width + margin + padding + border 的和 是不是超了  一行限定的宽度？

楼上的正解，建议LZ先理解好盒模型概念再实践

写好一个模型，做成css，每次使用这个正确的class，不要做重复工作
你也可以直接趴别人网站的css直接用

先去了解一下什么是盒模型，浮动，相信你了解了这些你就知道该怎么做啦

我也觉得浮动概念比较重要。

妥妥浮动啊。。。。盒模型其实看图就明白了
浮动加定位..反正我是迷糊好久

不知道各位有没有比较好的资料介绍看看啊

楼主关键的是 左右2个 的定位吧 别人的都是左右也是靠边的 。排版最简单么用 table 。用 div+css 模拟的话 在固定宽度情况下 左浮动之后 右边距 ，那 同一行的 最后一个 要注意 去掉 右边距

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：IE9-下带有overflow属性的DIV被当作是其中positioned元素的父元素来决定定位_html/css_WEB-ITnose 下一篇：急求教，在两个htm页面传参数时中文出现了乱码，试了网上的方法不管用。_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html按钮链接怎么打_html按钮链接如何打详细方法 答案：HTML中按钮添加链接常用四种方法：1.onclick事件跳转，兼容性好；2.button嵌套在a标签内，需设type="button"；3.form提交实现GET跳转，适合带参场景；4.样式化a标签模拟按钮，语义清晰且无需JS。
2025-11-09 19:49:11
462
如何通过Geany设置HTML验证插件的详细教程 Geany可通过插件和外部工具实现HTML验证。首先启用“ExternalTools”插件，再安装HTMLTidy或vnu.jar验证器。配置外部工具命令：Tidy使用tidy-eq-errors-quiet"$(basename%f)"，vnu.jar使用java-jar/opt/vnu/vnu.jar"%f"。保存文件后运行命令，结果在消息窗口显示，支持快捷键触发，双击错误跳转行号，实现高效语法检查。
2025-11-09 19:37:02
713
HTML5代码如何设计响应式表格 HTML5代码溢出处理的方案 响应式表格溢出可通过四种方案解决：1.用带滚动的容器限制宽度，允许横向滑动；2.用媒体查询在小屏隐藏非关键列；3.用sticky固定表头并滚动内容；4.超小屏转卡片布局，每行变卡片提升可读性。
2025-11-09 19:29:02
384
html网页临时缓存数据怎么清除_html网页临时缓存数据清除的实用技巧 清除浏览器缓存可解决页面显示异常问题，具体方法包括：一、通过Ctrl+Shift+Delete清除“缓存的图像和文件”；二、使用开发者工具禁用缓存并强制刷新；三、修改URL参数如添加?reload=1绕过缓存；四、开发者可设置Cache-Control等HTTP头控制缓存行为。
2025-11-09 19:19:02
627
内联CSS怎么应用到HTML_内联CSS应用到HTML的使用方法 使用内联CSS可直接在HTML元素的style属性中定义样式，适用于单个元素快速调整。通过在标签内添加style="property:value;"形式设置样式，各声明以分号分隔。可为多个元素分别添加内联样式，但不推荐大规模使用。结合JavaScript可通过element.style.property修改样式，实现动态交互效果。
2025-11-09 19:12:02
580
HTML视频怎么处理跨浏览器兼容性问题_HTML视频兼容性处理策略 答案：解决HTML视频跨浏览器兼容性需提供MP4和WebM双格式，通过标签优先加载，结合Modernizr检测不支持video的旧浏览器并降级处理，注意移动端自动播放限制与muted属性使用，配置服务器MIME类型为video/mp4和video/webm以确保正常加载。
2025-11-09 18:57:08
475
html缓存内容怎么一键删除_html缓存内容一键删除的完整攻略 网页加载异常或显示旧内容时，可通过清除浏览器缓存解决。首先在Chrome、Edge等浏览器中按Ctrl+Shift+Delete选择“所有时间”并勾选“缓存的图像和文件”后清除；其次使用开发者工具右键“检查”或F12，长按刷新按钮选择“清空缓存并硬性重新加载”，或直接按Ctrl+F5强制刷新；还可修改URL参数如example.com?reload=1使浏览器发起新请求；若拥有服务器权限，可设置HTTP头Cache-Control:no-cache、Pragma:no-cache、Expires
2025-11-09 18:24:02
204
html代码怎么部署_html网页代码部署到服务器方法与流程详解 要让他人通过互联网访问HTML网页，需将其部署到服务器。一、虚拟主机：购买服务后通过FTP上传文件至public_html目录。二、云服务器：购买ECS后安装Apache或Nginx，将文件传至/var/www/html并启动服务。三、GitHubPages：创建username.github.io仓库并推送代码，自动发布至对应域名。四、Vercel/Netlify：关联Git仓库，选择分支与路径，一键部署并支持自定义域名和HTTPS。
2025-11-09 17:51:08
393
html5使用iframe实现微前端架构 html5使用跨文档通信的postMessage 答案：通过iframe结合postMessage可实现轻量级微前端方案，适用于跨域、技术栈异构及强隔离场景。主应用用iframe嵌入子应用并利用postMessage通信，需校验origin防XSS，统一消息格式，处理高度自适应与路由同步问题，适合中小型项目。
2025-11-09 17:39:02
606
html图片如何插入_HTML图片（img/background）插入与路径引用方法 答案是掌握图片路径引用逻辑：HTML中用标签插入内容图片，路径相对HTML文件；CSS中用background-image设置背景图，路径相对CSS文件，二者均支持相对、绝对路径及网络URL，需注意基准点、大小写敏感和文件存在性。
2025-11-09 17:11:02
152
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部