个人中心
gpt4 book ai didi

html - div 文本重叠到另一个 div 上

转载 作者：行者123 更新时间：2023-11-28 16:54:38 25 4
gpt4 key购买 nike

我无法让我的 div 文本停止重叠，我不确定为什么。文本是从 JS 文件中提取的，以防没有任何内容为您填充。

出于某种原因，我无法让 div.subheader 类中的文本停止重叠到 div.resource 类中

HTML

<body>
        <div class="loading" id="loading"><img src="./images/dash-loading-graphic.gif"/></div>
        <div class="contactsScreen" id="contactsScreen"></div><div style="text-align:center;" id="popupTbl"></div> 
        <table class="maintable">
            <tr style="vertical-align: top; height: 130px;">
                <td class="header"><div id="qcntntTbl"></div><div class="mainHeader" id="mainHeader"></div>
                <br/>
                <div class="subHeader" id="subHeader"></div>
                </br>
                <div class="resource">
                    <div class="resourcesVideo"><a href="javascript: openVidWin();"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "playbutton.gif\" class=\"playButton\">");</script> <span class="resourceTxt" id="videoTxt"></span></a></div>
                    <div class="resourcesEE"><a href="javascript: setHelpContent(0);"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "documentIcon.gif\" class=\"docIcon\"/>");</script> <span class="resourceTxt" id="empRsrcs"></span></a></div>
                    <div class="resourcesMgr" id="divMgrResource"><a href="javascript: setHelpContent(1);"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "documentIcon.gif\" class=\"docIcon\"/>");</script><span class="resourceTxt" id="mgrRsrcs"></span></a></div>
                </div></td>
            </tr>
            <tr>
                <td><div id="ActnContent"></div></td>
            </tr>
        </table>
        <script type="text/javascript">
        function findObj(){
            if (filesloaded !=4) {  
                cntrnum = cntrnum + 1;
                setTimeout(findObj,2000);
                if (cntrnum == 20){
                    alert(" - Please contact your local IT Helpdesk for assistance viewing the What's Happening Now content. \n The content object is not defined.");
                }
            }
            else{
                document.getElementById("loading").style.display = "none";
                if (qryStrArr.length == 3 && frameQuarterIndicator.length == 1 && checkValidQuarter(frameQuarterIndicator) == true){
                    changeQ(frameQuarterIndicator);
                }
                else{
                changeQ(getThisQ());}
            }
        }
            //test to see if the js file loaded
        findObj();  
        </script>

    </body>

CSS

a.sfLink {font-family: Segoe Print; size; 10}
a {text-decoration:none;}
a:hover {text-decoration: underline;}
a.qLink:hover {text-decoration:none;}
a.whtNavLinks {color:#FFFFFF; font-family: Corbel; font-size: 14px; text-decoration: none; font-weight: bold;}
div {box-sizing: border-box;}
div.actnHeader {position: absolute; top: 12px; right: 285px;}
div.contactsScreen {display: none; z-index:-4; position: absolute; top: 0px; right: 0px; width:582px; height:100%; background-color :#ffffff; opacity: 0.70; filter: alpha(opacity=70);}
div.contactsTbl {display: none; z-index:-5; position: absolute; top: 15px; width: 530px; background-color :#cfcfcf; padding: 1px; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #aeaeae #aeaeae #989898 #aeaeae; font-family: Corbel;}
div.emplHeader {position: absolute; top: 15px; right: 62px;}
div.hlpCtgDiv {border-radius: 10px; border-width: 1px; border-style:dotted; border-color: #ffffff; display: none; width:494px;}
div.loading {z-index: 100; position: absolute; top: 5px; right: 0px; width: 100%; height: 390px; background-color: 2195DF; text-align: center; vertical-align: middle;}
div.mgrHeader {position: absolute; top: 15px; right: -8px; width: 60px; text-align:center;}
div.processBlurb {font-family: Segoe Print; font-size: 16px; text-align: center; width:430px; margin-bottom:10px;}
div.subHeader {z-index: 0; float: left; clear: both; height: 26px; width: 530px; font-family: Calibri, Arial; font-style: italic; font-size:12px; font-weight:bold; text-align: center;}
div.mainHeader {float: left; height: 30px; width: 530px; font-family: Calibri, Arial; font-size: 14pt; font-weight:bold; color:#ffffff; text-align: center; vertical-align: middle; border-style: solid; border-bottom-left-radius: 7px; border-bottom-right-radius:7px; border-width: 0px 2px 3px 1px; border-color: #c6c6c6 #c6c6c6 #888888 #c6c6c6;}
div.q {float: left; vertical-align:top; background-color: #fffce7; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; width: 90px; height: 60px; color:#c6c6c6;}
div.qCurrent {float: left; vertical-align:top; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #c6c6c6 #c6c6c6 #666666 #c6c6c6; width: 248px;  height: 60px; color:#3f3f3f;}
div.qcontentTbl {float: left; align: center; width: 440px;}
div.qcontentTbl {float: left; align: center; width: 440px;}
div.qspacerRow {float: left; width: 4px; height: 60px; padding:0px}
div.quarterTitle {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px;}
div.quarterTitle:hover {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px; border-radius: 5px; border: solid; border-width: 1px 2px 2px 1px; background-color :#fff; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4;}
div.quarterText {position: relative; top: 10px; text-align:center;  font-family: Corbel; font-size: 14px;}
div.quarterTitleCurrent {position: relative; top: -1px; text-align: center; font-family: Corbel; font-size: 32px; color:#ffffff;}
div.quarterTextCurrent {position: relative; top: -1px;  text-align:center; vertical-align:top; font-family: Corbel; font-size: 14px; color:#ffffff; line-height: 110%;}
div.resource {z-index: 2; left; clear: both; width: 530px; height: 30px; background-color: #fffce7; border-style: solid; border-radius: 7px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; font-family: Corbel, Arial;}
div.resourcesVideo{position: absolute; left: 85px;font-family: Corbel; font-size:11px; font-weight: bold; text-align: left; line-height: 70%; }
div.resourcesEE {position: absolute; left: 220px;font-family: Corbel; font-size:11px; font-weight: bold; line-height: 23px; text-align: left; line-height: 70%;}
div.resourcesMgr {position: absolute; left: 355px;font-family: Corbel; font-size:11px; font-weight: bold;  text-align: left; line-height: 70%;}
div.subHeaderBlurb {position: absolute; top: 80px; left: 130px; width: 400px; font-family: Segoe Print; font-size:12px; color:#3f3f3f;}
img.docIcon {vertical-align: middle; height: 23px; border: 0;}
img.docIconSmall {position: relative; left: 8px; height: 20px; border: 0;}
img.emailimg {height: 20px; border:0;}
img.empHdLn {position: absolute; top: 27px; right: 40px; width: 2px; height: 10px;}
img.mgrHdLn {position: absolute; top: 13px; right: 12px; width: 2px; height: 26px;}
img.playButton {vertical-align: middle; height: 20px; border: 0;}
img.helpicon {float: left;  height:20px; border:0;}
span.resourceTxt {width: 100px; height: 20px; vertical-align: middle;}
table.contactsGrid {width:500px;}
table.helpTbl {width:500px; border-color:#FFFFFF; border-radius: 10px; border-width: 1px; border-style: dotted; padding: 0px; border-spacing: 0px}
table.hlpCtgTbl {padding: 0px; border-spacing: 0px; border-width: 0px; border-radius: 10px; width: 100%; background-color: #fffce7;}
table.maintable {position: absolute; top: 0px; left: 0px; width: 530px; border-width: 0px; border-color: #000; padding: 0px; border-spacing: 0px;}
td.actnMgrSpc {padding-left: 5px;} 
td.actnVertLn {border-right: dotted 1px; border-color: #ededed; padding-left: 5px; padding-right: 5px;}
td.contacts {color:#FFFFFF;  text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-size: 12px;}
td.contactshdr {color:#FFFFFF; text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-weight: bold; font-size: 12px;}
td.gridheader {position: relative; font-family: Corbel; font-size:12px; font-weight: bold; background:url("images/ActionTableGradient.gif");  background-repeat: repeat; background-size: 462px 35px;}
td.gridsubheader {font-family: Corbel; font-size:13px; font-weight: bold; color: #3f3f3f; padding-right: 4px;}
td.gridtext {font-family: Corbel; font-size:12px; color: #000000; height: 35px;}
td.divider {border-bottom: dotted 2px; border-color: #c5c5c5 #ededed #c5c5c5 #ededed;}
td.header {width: 530px; padding: 0px;}
td.helpborder {border-right: double 3px; border-color: #fc1919; width: 35px;}
td.helpList {z-index: 5; background-color: #fffce7; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; font-family: Corbel; font-size:8px; font-weight:normal; vertical-align: top; width: 400px; height: 100%;}
td.linksList {vertical-align:top;}
tr.helpItem {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px;}
tr.helpItemHiglight {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px; background-color: #FFFEF4; cursor:pointer; border-radius: 10px; border-width: 1px 2px 3px 1px;}
ul, li {list-style-type: circle; padding: 0; margin-left: 10; font-weight: bold;}

最佳答案

您必须尝试将样式规则添加到 .subHeader overflow:auto

关于html - div 文本重叠到另一个 div 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32356934/

25 4 0
文章推荐： html - 同一个 div 中的响应式多三 Angular 形 CSS
文章推荐： python - TextMate 和 Django 集成 - 支持 {% %} 标记
文章推荐： javascript - Canvas 中的链接 (HTML5)
文章推荐： Javascript 加载两个值的单输入字段
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com