margin负值

最新推荐文章于 2024-07-25 10:45:42 发布

坚持的faye413

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量333

点赞数

分类专栏：小问题文章标签：自适应布局浮动绝对定位 margin-left CSS

本文链接：https://blog.csdn.net/m0_61487366/article/details/121971474

版权

小问题专栏收录该内容

22 篇文章 0 订阅

订阅专栏

如果父级的宽度变宽，仍然是自适应的。（可以改变.box的宽度试试，也可以加许多文字测试。）注意：不需要给右侧加任何宽度，因为margin-left把左侧的图像+边距都加到一起了呢，就能永远保持自适应了，修改图片什么的比较方便哦。

代码如下：

<body>
<div class="box">
<h6>关于我们</h6>
<div class="cont clearfix">
<div class="img">
<img src="img/faye.jpg" alt="faye">
</div>
<div class="text">
<h3>Faye</h3>
<p>Faye0413</p>
<p class="txt">简介简介简介简介简介简介简介简介简介简介简介</p>
</div>
</div>
</div>
</body>

当然，实现此效果也可以用定位，把“关于我们”用定位定过去也是极好的！

代码如下：

.box{
width:452px;
height:112px;
border: 1px solid red;
margin:40px auto;
position:relative;
}
.box h6{
height: 20px;
line-height: 20px;
font-size:12px;
background: #fff;
padding: 0 10px;
position:absolute;
left:10px;
top:-10px;
}（其他代码都一样）

坚持的faye413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin负值

如果父级的宽度变宽，仍然是自适应的。（可以改变.box的宽度试试，也可以加许多文字测试。）注意：不需要给右侧加任何宽度，因为margin-left把左侧的图像+边距都加到一起了呢，就能永远保持自适应了，修改图片什么的比较方便哦。代码如下：<style> *{ margin:0; padding:0;} li{ list-style: none;} .clearfix:after,.clearfix:before{ content: ''; ...
复制链接

扫一扫