display:inline-block 引发的灵异事件

最新推荐文章于 2024-07-24 20:42:50 发布
最新推荐文章于 2024-07-24 20:42:50 发布
阅读量199 收藏
点赞数
分类专栏： html css 文章标签： css html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/star7783620/article/details/107109969
版权

 以下源码来源于张鑫旭的博客：博客原链接以及样式
https://www.zhangxinxu.com/study/201708/percent-padding-auto-layout.html
 

样式图片

copy下来格式化后的代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="description" content="百分比padding与固定比例图片自适应布局 » 张鑫旭-鑫空间-鑫生活" />
    <meta name="description" content="张鑫旭web前端学习实例页面 百分比padding与固定比例图片自适应布局" />
    <meta name="keywords" content="padding, css, 布局, 图片, 自适应" />
    <meta name="author" content="张鑫旭, zhangxinxu" />
    <title>百分比padding与固定比例图片自适应布局 » 张鑫旭-鑫空间-鑫生活</title>
    <link rel="stylesheet" href="../css/demo.css">
    <link rel="stylesheet" href="../css/hl.css">
    <style>
        .works-wrap {
            max-width: 1000px;
            margin: auto;
        }

        .works-con {
            padding: 0;
            margin: 0 -.5em;
            list-style: none;
            overflow: hidden;
        }

        .works-item {
            display: inline-block;
            min-width: 150px;
            width: calc(20% - 1em);
            margin: 20px .5em 0;
            background: AppWorkspace;
            vertical-align: top;
        }

        .works-item-t {
            padding-bottom: 133%;
            position: relative;
        }

        .works-item-t>img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .works-item-b {
            margin: .5em .5em 1em;
        }

        .works-item-h {
            margin: 10px 0 0;
            color: CaptionText;
            font-size: 100%;
        }

        .works-btn-box {
            padding-top: 10px;
        }

        .works-btn {
            display: inline-block;
            padding: 0 8px;
            font-size: 87.5%;
            line-height: 25px;
            text-decoration: none;
            background: DarkGoldenrod;
            color: White;
        }

        @media screen and (max-width: 1000px) {
            .works-item {
                width: calc(25% - 1em);
            }
        }

        @media screen and (max-width: 768px) {
            .works-item {
                width: calc(33.3% - 1em);
            }
        }

        @media screen and (max-width: 580px) {
            .works-item {
                width: calc(50% - 1em);
            }
        }

        @media screen and (max-width: 400px) {
            .works-item {
                width: calc(100% - 1em);
            }
        }

        .container {
            position: relative;
            width: 100%;
            height: 500px;
            background: #ffff66
        }

        .left {
            position: absolute;
            width: 200px;
            background: #ff0066;
            top: 0;
            height:100%;
            left: 0
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            position: relative;
            background: #ffff66;
            height: 100%;
        }
        .right {
            width:200px;
            position: absolute;
            top:0;
            right: 0;
            height: 100%;
            background:#66ffff
        }
        .flex-container{
            display: flex;
            width:100%;
            height: 800px;
            background: #ffff00
        }
        .flex-left{
            width:200px;
            height: 100%;
            flex:0 1 auto;
            background: #00ff00;
        }
        .flex-center{
            position: relative;
            flex:1;
            background: #00ffff;
            height: 100%;
        }
        .flex-right {
            width: 200px;
            height: 100%;
            flex:0 1 auto;
            background:#ff00ff
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="flex-container">
        <div class="flex-left"></div>
        <div class="flex-center"></div>
        <div class="flex-right"></div>
    </div>
    <div id="main">
        <div id="body" class="light">
            <div id="content" class="show">
                <div class="demo">
                    <div class="works-wrap">
                        <ul class="works-con">
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">RE从零开始的异世界生活</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                            <li class="works-item">
                                <div class="works-item-t">
                                    <img src="./150x200.png">
                                </div>
                                <div class="works-item-b">
                                    <h4 class="works-item-h">一念永恒</h4>
                                    <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读
                                            &gt;</a></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>


            </div>
        </div>
    </div>

</body>

</html>

完事样式如下：

 然后一下午就在这问题上卡过去了~
最后咨询A君：A君？但 给出了外层ul：font-size:0,内层li：font-size:16px的方式问题解决，
原因：https://blog.csdn.net/qq_32614411/article/details/82223624?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

为欢几何丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
下拉菜单的点击事件
张火火
05-03 2904
&lt;view wx:for="{{project}}" wx:key="{{item.id}}" &gt; &lt;!-- &lt;view wx:if="{{item.id==0}}" bindtap="showitem1"&gt; --&gt; &lt;view class="body_head" bindtap
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
css 设置最小宽度min-width，max-width宽度 width 不起作用问题？
m0_65730686的博客
04-12 2467
css 设置最小宽度min-width，max-width宽度 width 不起作用问题？
两个元素设置display: inline-block之后宽度50%不能在一行显示
weixin_42178670的博客
08-03 950
解决方法一： 删除两个元素之间的空格 // 以下写法会变成两行 <div>line1</div> <div>line2</div> // 以下写法不会变成两行，删除两个元素之间的空格 <div>line1</div><div> line2</div> 解决方法二： 在父级容器设置font-size: 0; ...
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如自定义宽度、高度），同时保持内联元素的排列方式，即允许元素在同一行显示。然而，IE6和IE7这两个较老的浏览器对`...
wordpress建站插件和常见问题解决
平步青云的博客
07-29 1306
一、自己在wordpress建站过程中使用的操作性强、友好的插件分享 1、页面编辑插件：Elementor 这个插件可编辑性强，除顶部和底部可以修改外，其他所有内容时自己可以修改的，还可以创建自己的模板，在需要的位置添加，还可以自己编写html来编辑网页。 2、登录注册以及权限管理插件： Pie Register 该插件可以设置未注册用户不具访问某些网页的权限，还可以在注册、登陆、忘记密码...
display:inline-block属性的标签出现的问题及解决方法
热门推荐
奋斗小强的博客
07-24 1万+
1，首先说明display:inline-block可以让块级元素并排显示，但是需要注意一些问题，如下； 1、有些标签是默认的inline-block属性，例如img 和input，这些标签称为行内块标签 1.对于img标签会出现白边问题，如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ch...
CSS中的 inline-block 导致换行问题
华丽的开幕
08-26 2798
最近在写导航的时候，使用了inline-block，之前的都是用float写，没有遇到今天的换行问题，打开调试模式，查看padding和margin均为0，也就是说，问题并不是出现在换行元素本身上边，于是查找了一些资料，了解到* inline-block是包含空格、换行符的，所以会导致inline-block产生不可见的间距，就出现了无法理解的换行。 查看大神们的解决办法，了解到，可以通过以下办...
解决用display:inline-block导致高度不一致问题
cooker_666的博客
11-30 5524
设置9宫格棋子的时候，通过给单独的square设置样式，原本是打算使用display;inline-block.来设计布局的。然后通过点击事件然后像square插入字体的时候发现了一旦插入，就会因为自动对齐字体底部导致高度变化。 .square{ display: inline-block; width: 80px; height: 80px; border: 1p...
display：inline-block引发的空白间隔问题
qq_34309704的博客
08-09 1181
1、li标签举例 为了让li在一行显示，并且可以设置宽高，我们设置li的display：inline-block，这时&lt;li&gt;之间会出现8px的空白间隔。如下所示： 代码如下： html: &lt;ul&gt; &lt;li class = "a"&gt;a&lt;/li&gt; &lt;li class = "b"&gt;b&lt;/li&amp
html中inline与block的细节对比
samuellovefree的专栏
12-13 953
display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。 display:inline inline元素不会独占一行，多个相邻的行
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
贵林之恋的博客
07-24 282
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
CSS怎么实现镜像效果？
宇珩的博客
07-23 1086
实现css镜像效果，包含动画，封装vue组件
CSS：mix-blend-mode属性（设置元素的混合模式）
最新发布
m0_65029152的博客
07-24 968
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 471
CSS学习笔记
display: inline-block有白边
03-28
display: inline-block是CSS中的一个属性，它可以将元素为内联块级元素。当使用display: inline-block时，元素会像内联元素一样排列在一行上，但是可以设置宽度、高度和边距等属性。 关于display: inline-block有白边的问题，通常是由于元素之间的空白字符（空格、换行符等）导致的。由于inline-block元素会将空白字符也作为内容的一部分进行渲染，所以会出现白边的情况。 解决这个问题的方法有两种： 1. 去除空白字符：可以通过在HTML代码中去除元素之间的空白字符，或者使用注释来占位，从而避免出现白边。 2. 设置父元素的font-size: 0属性：可以通过设置父元素的字体大小为0，来消除空白字符的影响。然后再在子元素中重新设置合适的字体大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值