DIV + CSS 父层宽度对子层内容自适应 求高人指点！！！网上都是子层对父层自适应问题。。。。

Posted 2023-05-04

我现在要做的效果是这个图， 这是一个标题的背景。 标题长度不一，有的多有的少，想通过父层对子层的适应，随着子层内容的增加，背景变长，效果不变。求高人指导！

可以用滑动门方法。
1.先把你的图切开两部份，比例如下：左1比10，右9比10.（不用太精确，大概就可以了）
2.设置左边和右边两个大块，并浮动。
参考如下：
.left background:url(图的左部份) no-repeat left center;float:left;line-height:40px(行高);;
.right background:url(图的右部份) no-repeat right center;float:left;line-height:40px;
3.大面积的一部份作为父元素，也就是.right.参考如下：
<div class="right"><div class="left">内容</div></div>

如果觉得字距离边太近，可以在子元素中设置padding。

以上可以实现左右滑动，自适应内容宽度，不过有个问题，就是在制图时，右边那一块制作足够的宽，因为内容少，不会有问题，内容太多，宽度不足就会出现空白。
如果你需要写大量内容，也有办法，不过稍复杂一点，相信写标题这个已经够用了。

有什么需要帮忙可以再M我。 参考技术A 父层用一个长一点的带右边角的图片做背景，right top，不重复，子层里面加一个左边角的图片，靠左排列，margin padding 的left属性都设为0就可以了， 参考技术B 可以在背景上做一个边框线。如：border:1px solid #ccc;边框随内容扩展 参考技术C 把宽度设为auto

css div宽度根据文字多少自适应

参考技术A width:auto就可以，或者display：inline-block改为行内块