gpt4 book ai didi

html - 根据标题大小设置边距顶部? HTML CSS

转载 作者:太空宇宙 更新时间:2023-11-04 03:24:10 25 4
gpt4 key购买 nike

我正在尝试设置一个带有固定标题的页面,当浏览器窗口发生变化时,该标题的大小会发生变化(比方说从个人电脑到手机)。到目前为止我让它工作正常,但现在我有内容我想放在它下面并且我不想将它设置为固定边距(因为当它跳成两个时标题将覆盖内容的顶部线)。

有没有办法使用 html/css 来做到这一点?

另一种方法可能是设置一个占位元素,但和以前一样的问题,你如何根据标题大小调整它的大小?

这是我的代码

.header{
position:fixed;
width:70%;
margin-left:15%;
margin-right:15%;
height:3em;
text-align:center;
}
/* logo positioning */
#logo{
display:inline-block;
}
/* napis na headerju */
#headersign{
display:inline-block;
vertical-align:top;
font-weight:bold;
font-size:160%;
}
/* top menubar */
#topmenu {
background-color:#009933;
color:#ffffff;
font-family:verdana;
width:100%;
height:100%;
}
/* text menubar */
.menutext {
font-family:verdana;
color:#ffffff;
}
.menutext:hover {
color:#cccccc;
}
/* text position menubar */
#linkijs{
float:left;
display:inline;
margin-left:1%;
}
#linkeng{
float:right;
display:inline;
margin-right:1%;
}
/* podatki o knjižnici */
#leftpanel {
/*positioning*/
top:0;
margin-left:15%;
background-color:#00cc66;
}
    <body>
<div class="header">
<img id="logo" src="images/ijs_logo.gif" alt="logo" />
<p id="headersign">ZNANSTVENO INFORMACIJSKI CENTER</p>
<div id="topmenu">
<a href="http://www.ijs.si/"><p class="menutext" id="linkijs">IJS</p></a>
<a href="indexEN.html"><p class ="menutext" id="linkeng">ENGLISH</p></a>
</div>
</div>
<div id="leftpanel">
<p>
Institut Jožef Štefan <br />Knjižnica <br/>Jamova 39 <br/>1000 Ljubljana <br/><br/>tel: +386 1 47 73 304 <br/>fax: +386 1 47 73 152 <br/><br/>Delovni čas:<br/>pon-čet: 8:00-17:30<br/>pet: 8:00-17:00
</p>
</div>
<div id="rightpanel">

</div>
</body>

希望我没有错过类似的帖子,整个早上都在努力寻找解决方案

最佳答案

您可以简单地使用一个“隐藏的”div,它最初位于您的标题下方(因此具有较低的 z-index),并且具有相同的维度:
.headerMargin{
位置:初始;
宽度:70%;
左边距:15%;
边际权利:15%;
高度:3em;
文本对齐:居中;
}

关于html - 根据标题大小设置边距顶部? HTML CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27379434/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com