jquery实现元素不确定时，如何确定宽度 && inline-block_jquery fadein 设置为inline-block-优快云博客

本文介绍了一个项目需求，即如何在左边宽度固定、右边宽度不确定的情况下，利用jQuery确定右侧元素的宽度。文章提到使用inline-block布局时会存在4px的空白间距问题，并提供了三种修改HTML结构来解决间距的方法。建议在页面结构简单时通过调整HTML结构来实现所需布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

CSS

*{margin: 0;padding:0;}

.left{
    display: inline-block;
    width: 200px;height: 600px;
    background: #555;
}

.right{
    display: inline-block;
    width: 200px;height: 600px;
    background: orange;
}

在浏览器下查看
demo1

inline-block

这里涉及到inline-block的一个知识点，使用inline-block值的元素并排显示布局时，他们并不能完全靠近，使用inline-block的元素之间会存在“4px”的空白间距。
方法一改变html结构
改变结构一：

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

改变结构二：

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

改变结构三（写在一行）：

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

仍会有很多种方法，但是在页面不复杂时推荐改变html结构来实现效果。

扩展阅读：
Fighting the Space Between Inline Block Elements
去除inline-block元素间间距的N种方法-张鑫旭