html - 在某些情况下识别不需要的 div 垂直位移的来源-6ren

html - 在某些情况下识别不需要的 div 垂直位移的来源

转载作者：行者123 更新时间：2023-11-28 13:37:23

我正在为设备的网络用户界面构建“系统健康”屏幕。其中一部分是一组显示电源电压的仪表。这些仪表是由一堆“内联 block ”div 构成的。它们是基于 JSON 描述(阈值级别、阅读、标题等)在客户端构建的，但我认为这不会以任何方式导致我的问题，因为我可以使用静态 HTML 重现它。通过更改 .needle 元素的“top”属性，可以实时更新读数。该仪表分为 7 个部分:良好和高/低警告、严重、致命。只要它们是对称的，一切看起来都很好。如果我重新安排事情，使我的量表从零开始，低致命带正确地扩展到一直延伸到零。不利的副作用是整个仪表会向下偏移页面 lo-fatal 和 hi-fatal 之间的高度差。

下面的代码是问题的独立演示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <!-- IMPORTANT - After any changes, check this against the w3c validator:
         http://validator.w3.org/#validate_by_upload
         Anything other than a clean pass is not acceptable!
    //-->
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>WTF?!?</title>
        <style type="text/css">


            .gaugeset {
                background          : #f8f8f8;
                font-family         : sans-serif;
                font-size           : 70%;

                border              : thin solid #ccc;
                display             : inline-block;
                text-align          : center;
            }

            .gauge {
                background          : #f0f0f0;
                font-family         : sans-serif;

                border              : thin solid #ccc;

                margin              : 7px;
                display             : inline-block;
                border              : thin solid black;
            }

            .gauge > h1 {
                background          : white;
                font-size           : 120%;
                text-align          : center;

                -webkit-border-radius: 5px 5px 0px 0px;
                -moz-border-radius  : 5px 5px 0px 0px;
                border-radius       : 5px 5px 0px 0px;

                margin              : 0px;
                padding-left        : 7px;
                padding-right       : 7px;
            }

            .readout {
                display             : inline-block;
                height              : 180px;
                width               : 24px;
                margin              : 7px;
                margin-left         : 27px;
                margin-right        : 45px;
                border              : thin solid #ccc;
            }

            .fatal {
                background              : #ff7f7f;
                height                  : 10%;
            }

            .critical {
                height                  : 10%;
                background              : #ffbf7f;
            }

            .warn {
                height                  : 10%;
                background              : #ffff7f;
            }

            .good {
                height                  : 40%;
                background              : #c0ffc0;
            }

            #asymetric .fatal {
                height                  : 18px;
            }

            #asymetric .critical {
                height                  : 22px;
            }

            #asymetric .warn {
                height                  : 6px;
            }

            #asymetric .good {
                height                  : 19px;
            }

            #asymetric #special {
                height                  : 87px;
            }

            .needle {
                position                : relative;
                left                    : 27px;
                top                     : 45px;
                line-height             : 0;                    /* So that the tip of the arrow is where we want it */
            }

            /* The text to the left that marks the transitions between zones */
            .marker {
                position                : relative;
                right                   : 29px;
                text-align              : right;
                line-height             : 0;
                font-size               : 70%;
            }

        </style>
    </head>
    <body>
        <div class="gaugeset">
            <div class="gauge">
                <h1>1.0V</h1>
                <div class="readout" id="asymetric">
                    <div class="needle">&#9664&nbsp;-.--V</div>
                    <div class="fatal"></div><div class="marker">1.4v</div>
                    <div class="critical"></div><div class="marker">1.3v</div>
                    <div class="warn"></div><div class="marker">1.2v</div>
                    <div class="good"></div><div class="marker">0.8v</div>
                    <div class="warn"></div><div class="marker">0.7v</div>
                    <div class="critical"></div><div class="marker">0.6v</div>
                    <div class="fatal" id="special"></div>
                </div>
            </div>
            <div class="gauge">
                <h1>1.0V</h1>
                <div class="readout">
                    <div class="needle">&#9664&nbsp;-.--V</div>
                    <div class="fatal"></div><div class="marker">1.4v</div>
                    <div class="critical"></div><div class="marker">1.3v</div>
                    <div class="warn"></div><div class="marker">1.2v</div>
                    <div class="good"></div><div class="marker">0.8v</div>
                    <div class="warn"></div><div class="marker">0.7v</div>
                    <div class="critical"></div><div class="marker">0.6v</div>
                    <div class="fatal"></div>
                </div>
            </div>
        </div>
    </body>
</html>

我一直在用 Firebug 对元素进行可视化检查并检查计算出的高度、顶部等，但都没有成功。不对称仪表中的某些东西正在“阻碍”并破坏预期的文档流。这是什么？

最佳答案

您需要添加 vertical-align: top至 .gauge , 因为它有 display: inline-block .

阅读本文，特别是谈论“基线”的部分，了解为什么 vertical-align事项:http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

一般来说，无论何时使用 inline-block , 你应该考虑设置 vertical-align (除非您对默认的 baseline 感到满意)。

可以看到vertical-align的常用值对比结合 inline-block这里:http://www.brunildo.org/test/inline-block.html

关于html - 在某些情况下识别不需要的 div 垂直位移的来源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9209379/

文章推荐： swift - 有没有办法取消 DispatchQueue concurrentPerform 操作？

文章推荐： ios - Swift 中的大 JSON 文件

文章推荐： html - 重复的标题标签？

java - 在具有多个条件的 If 情况下，我们能否获得条件失败的确切位置？
我是 Java 新手，这是我的代码， if( a.name == b.name && a.displayname == b.displayname && a.linknam
javascript - 在下面的 JavaScript 情况下，如何避免重复自己的情况？
在下面的场景中，我有一个 bool 值。根据结果，我调用完全相同的函数，唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve
c++ - 异常(exception)情况下，我想在没有任何堆栈展开的情况下进行调试
我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序？是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高
c++ - 在什么情况/情况下 dynamic_cast<> 会失败？
在修复庞大代码库中的错误时，我观察到一个奇怪的情况，其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some
c# for 循环在 switch/case 情况下 - 如何？
我正在尝试用 C# 扩展给定的代码，但由于缺乏编程经验，我有点陷入困境。使用 Visual Studio 社区，我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即
javascript - 在 AJAX 情况下，如何在目标页面评估 JavaScript？
这可能是一个哲学问题。假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa
html - 在 Usemap/area 情况下，光标未更改为指针
我有以下 HTML 代码，我无法在所有浏览器中正常工作: 我试图在移动到
swift - 在这种 Firebase 情况下，如何在函数之间传递数据？ swift + Xcode
我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉，在两
ios - 在 iPad DetailView 情况下，viewDidUnload 未被调用
我设置了一个详细 View ，我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。我发现，对于 Nibs 的类，永远不会调用 viewDidUnloa
javascript - 在这种 javascript 情况下，除了 eval 之外还有其他选择吗？
我需要动态访问 json 文件并使用以下代码。在本例中，“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]
c# - 在 HTTPS 情况下，服务器证书未使用 HTTP.SYS 正确配置
我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书，但是在调用 WCF 服务时出现以下异常。向 https://XXXX.com/AHSharedServices/Custome
postgresql - 即使在 ON CONFLICT DO NOTHING 情况下，postgres INSERT 触发器也会触发
在几个 SO 答案(1、2)中，建议如果存在冲突则不应触发 INSERT 触发器，ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了，但在我的实验中似乎并非如此。这是我的 S
java - 在 Hibernate3 中的 saveOrUpdateAll 情况下，具有相同标识符值的不同对象已与 session 关联
如果进行修改，则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr
javascript - 为什么 React App 的 redux 情况下 IndexOf(Object) 可以工作？
我使用 indexOf() 方法来精细地查找数组中的对象。直到此刻我查了一些资料，发现代码应该无法正常工作。我在reducer中尝试了上面的代码，它成功了 let tmp = state.find
mysql - 在指定了 ORDER BY 和 LIMIT 并且实际上只需要连接少量行的 JOIN 情况下，MySQL 的行为如何？
假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU
ios - 在使用 swift ios 的某些 URL 情况下，Alamofire 进度状态显示 0.0
代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在某些情况下识别不需要的 div 垂直位移的来源