jquery实现元素不确定时，如何确定宽度 && inline-block

最新推荐文章于 2017-08-31 21:41:31 发布
最新推荐文章于 2017-08-31 21:41:31 发布
阅读量823 收藏
点赞数
分类专栏： html&css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gs6511/article/details/53180788
版权
本文介绍了一个项目需求，即如何在左边宽度固定、右边宽度不确定的情况下，利用jQuery确定右侧元素的宽度。文章提到使用inline-block布局时会存在4px的空白间距问题，并提供了三种修改HTML结构来解决间距的方法。建议在页面结构简单时通过调整HTML结构来实现所需布局效果。
摘要由CSDN通过智能技术生成

实际项目中遇到的一个需求是：左边宽度固定，右边不固定，且大小为水平方向剩余宽度。
自己的实现是这样的：
HTML代码

<p>需求 左边宽度固定，右边不固定，大小为水平剩余宽度</p>

<div class="left"></div><!--  
--><div class="right"></div>

CSS

*
最低0.47元/天 解锁文章
cloud_guo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
inline, inline-block, block 区别 & 宽高设置 & 与margin、padding共用失效情况 整理
BigOrange的博客
11-16 1737
根据demo测试后的总结如下： display:inline; 并列显示在同一行 宽高不可设置； 宽高就是它包含的文字或图片的宽高。 margin：只有左右，上下失效 padding：padding-top会超出父级 display:inline-block; 并列显示在同一行 宽高可设置； 元素宽度在不设置的情况下，和内容的宽度一致 高度在不设置情况下，和内容高度一致（而对于...
全面解析display属性
关注我！带你一路 "狂飙" 到底！
12-29 361
对于其他属性值，了解都比较一般，在平时开发过程中也不太用得到其他的属性值，但是每次用这个属性的时候，脑海里都会冒出来，其他的属性值，设置了会是怎么样、有什么样的特点，这个奇奇怪怪的想法，所以找了个时间，写下这篇文章， 跟我有相同可爱想法的伙伴，如果感兴趣的，可以驻步瞄一眼哟；所以当display的属性值设置为none的时候，表示的是没有框类型，没有框类型的元素，是无法在浏览器中显示的，就实现隐藏元素的作用了；的属性值，其他的标签也可以设置，但是都不具备表格标签的功能和特征，所以表格中的标签对应的。
关于display属性block、inline、inline-block的联系与区别
leejj_520的博客
02-23 1676
display 属性规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型。 首先来解释一下这三者分别是什么含义： display：block  此元素将显示为块级元素，此元素前后会带有换行符。 display：inline  默认值，此元素会被显示为内联元素，元素前后没有换行符。 display：inline-block  行内块元素（CSS2.1 新增的值），意
如何解决inline-block元素的间距问题？
qq_25602411的博客
05-23 1213
inline-block元素之间会默认大概有4px的间距，解决方案大概有4种，最根本原因由于inline-block元素与inline-block元素之间有文本的原因
jQuery实现瀑布流布局的图片特效(固定宽度高度随意).zip
11-19
在本案例中，我们将探讨如何使用jQuery库来实现一个灵活的瀑布流布局，同时允许图片的宽度和高度可变。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、...
banner图轮播实现-jquery
09-19
display: inline-block; height: 15px; width: 15px; margin: 0 5px; background-color: #ccc; border-radius: 50%; transition: background-color 0.5s ease; } .dot.active { background-color: #ff0000; ...
jQuery实现简单的滑动导航代码(移动端)
10-19
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的移动端滑动导航。滑动导航是一种常见于移动应用和响应式网站的设计元素，它允许用户通过滑动或点击导航菜单项来浏览不同页面或内容区域。这里我们将关注一个...
jquery+css实现横向动感菜单
06-06
1. **布局**：通过display属性，我们可以控制菜单元素的显示方式，如设置为inline-block或flex，实现水平排列。 2. **过渡效果**：CSS的transition属性用于定义元素从一种样式变换到另一种样式的速度，这使得菜单在...
jquery控制display属性为none或block
12-10
代码如下: //隐藏 $(“#id”).css(‘display’,’none’); //显示 $(“#id”).css(‘display’,’block’); 或 $(“#id”)[0].style.display = ‘none’; $(“#id”)返回的是JQuery 它是个集合肯定有display属性 $(“#id”).show()表示display:block, $(“#id”).hide()表示display:none; $(“#id”).toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
一个基于 jQuery 实现的简单跑马灯效果示例.docx
05-08
- `display: inline-block`：将 `marquee-text` 元素作为内联块级元素处理，允许设置宽度和高度。 - `padding-right: 100%`：让 `marquee-text` 的宽度为其自身宽度的100%，这样可以使其在容器内水平滚动。 - `...
inline-block的几个问题(还没解决)
超胆孤侠
08-31 455
最近在练习代码的时候,遇到几个问题,但是没找到解决办法.详情如下 *{margin: 0;padding: 0;} a{display: inline-block; margin: 1px; border: 1px solid black; text-decoration: none; width: 120px; height: 20px; back
jquery 判断元素下是不是有子元素
热门推荐
彻底拆分，一切可控！
09-02 1万+
jquery判断子元素是否存在 一、判断子元素是否存在 //一级子元素if($("#specialId>img").length==0) if($("#specialId:has(img)").length==0) { //-----没有img子标记----- } else { //-------有img子
【转】inline-blcok 前世今生
weixin_33869377的博客
08-16 170
转自：http://ued.taobao.com/blog/2012/08/15/inline-blcok/曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的...
基于ssm和vue的 家庭理财系统源码 家庭理财系统代码（高分毕设项目源码）
最新发布
08-23
1. 家庭理财系统代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
jquery .css 设置 span 宽度 无效
05-29
如果您使用 jQuery 的 .css() 方法设置 span 元素的宽度无效，可能是因为 span 元素默认是一个行内元素，而行内元素是不能设置宽度和高度的。如果您想要设置 span 元素的宽度，可以将其样式设置为 display: inline-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值