Question

我需要创建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>

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

我需要顶部标题（目前在表格中）在滚动时不移动，左边菜单栏也一样，需要％，这样它才能适合不同大小的屏幕。

任何人都有任何想法我能用它做什么？

Answer 1

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

另外，不要使用表格进行布局。这不是语义。

没有必要使浮动元素内联。它不会是内联的。如果这些内联元素未浮动，则不会应用您指定的宽度。另外，不要在元素上使用style属性 - 使用CSS。

这些建议可能无法解决您的具体问题，但目前一切都有点混乱，所以我认为您现在有更大的问题需要解决......

Answer 2

尝试使用以下更改

<div id="left-bar">
   <iframe src="image.png" width="100%" height="100%" frameborder="0"   scrolling="auto"></iframe>
</div>
<div id="right-bar">
   <iframe name="rightiframe" src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>

#left-bar {
   width: 20%;
   ........
}
#right-bar {
   width: 80%;
   .......
}

注意：切勿使用表格来对齐页面中的内容。始终使用带有.css文件中定义的css的div，并为div标签定义适当的'class'属性。

CSS Divs％widths

2 个答案: