樱花庄的某君 2022-03-06 21:04 采纳率: 76.9%
浏览 107
已结题

CSS中为什么元素的实际宽度不是我设定的宽度

我遇到一个问题,我在写CSS时,给类名为pic的label元素设定了宽度和高度都是180px,可是如果后面的类名为txt的盒子不设置宽度的话,pic的宽度就会变得特别窄,如果给txt盒子设定任意宽度,pic宽度就会恢复我设定好的宽度,这是为什么咧?代码如下:

<div class="content">
            <label for="" class="pic">
                <img src="1.png" alt="" class="img_1">
            </label>
            <div class="txt">
                <h2 class="tit">SECTION1</h2>
                <p class="info">先说通假字。通假字是古人有某个读音,却没有这个字,因此用同音的字来替代。但是古代本来就有“窗”这个字,为什么要用“床”替代呢?如果是为了平仄的需要,似乎也没有必要,因为这两个字都是平声。再说了,就算是通假字,也是一个约定俗成的过程,除了这首诗,哪里还有地方用“床”通假“窗”呢?</p>
                <button class="btn">Read More</button>
            </div>
        </div>

CSS代码如下:


.content {
    height: 320px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 25px;
}

.pic {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    box-shadow: 0 10px 50px rgba(0,0,0,.2);
    overflow: hidden;
}

.pic img {
    display: block;
    height: 100%;
    width: 100%;
}

.txt {
    /* width: 300px; */
}

当我不给txt盒子设置宽度时,pic(图片)变窄:

img


当我给txt盒子设置宽度时,pic(图片)宽度恢复正常:

img

希望大家能指教一下俺,谢谢啦

  • 写回答

3条回答 默认 最新

  • 前端互助会 2022-03-07 09:40
    关注

    因为你的flex布局,你的写法是会将两个盒子弹性的宽度展示在这一行的;我觉得你需要去学习一下flex布局得相关语法

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月15日
  • 已采纳回答 3月7日
  • 创建了问题 3月6日

悬赏问题

  • ¥20 Yolov5训练报错
  • ¥15 Unity发布gzip压缩的webgl之后让浏览器可以正常显示画面
  • ¥15 有没有人知道这种提示怎么关?现在不做ts项目了不知道咋关了,求解,现在我以前的js项目都是这种提示了
  • ¥15 为什么mysql做了碎片化处理data_free还是很高
  • ¥15 single positional indexer is out-of-bounds
  • ¥15 LSTM 模型数据量需要多少?
  • ¥15 mysql数据抓包开发报表
  • ¥15 linux系统下安装office打不开
  • ¥20 rsync脚本分发错误,文件不齐全
  • ¥15 labview顺序结构与时间延时