gpt4 book ai didi

html - CSS Div % 宽度

转载 作者:行者123 更新时间:2023-11-28 13:11:44 25 4
gpt4 key购买 nike

我需要创建 CSS div。

  • 标题顶部的一个(全宽)
  • 左侧 (180px) 用于垂直菜单
  • 右边一个是主要内容

左边的菜单将是一个 iframe,然后右边的菜单也是一个 iframe。

我目前有这段代码:

<style type="text/css">
body,html {
height:98%;
}
#top-bar {
width:100%;
padding:10px 10px 10px 10px;
margin:0 0 10px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
position:fixed;
z-index:999;
}
#right-bar {
margin-left:180px;
width:auto;
display:inline;
}
#space {
width:100px;
height:120px;
}
</style>

<table width="100%" border="0" cellspacing="10" cellpadding="10" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
<tr>
<td><a href="index.php"><img src="http://www.integradigital.co.uk/images/company/logo.png" width="282" height="41" /></a></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
</table>

<div id="space"></div>

<div id="left-bar"><iframe src="header.php" width="180px" height="480px" frameborder="0" scrolling="auto"></iframe></div>

<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="480px" frameborder="0" scrolling="auto"></iframe>
</div>

但正确的内容似乎在左侧菜单下

我需要顶部标题(当前在表格中)在滚动时不移动,左侧菜单栏也是如此,并且需要为 % 以便它可以适应不同尺寸的屏幕。

有人知道我能用它做什么吗?

最佳答案

首先,将样式移动到单独的样式表中并从 <head> 链接到它页面的。不要使用 <style>元素,因为它很难维护并且会导致页面重复。 <style>元素不应该在 <body> 中页面的。

此外,不要使用表格进行布局。这不是语义的。

将 float 元素内联是没有意义的。它不会是内联的。如果这些内联元素没有 float ,则不会应用您指定的宽度。另外,不要使用 style元素上的属性 - 使用 CSS。

这些建议可能无法解决您的具体问题,但目前一切都有些困惑,所以我认为您此时有更大的问题需要解决...

关于html - CSS Div % 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15452475/

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