0

所以，我试图让这些 div 彼此相邻，在格式的导航菜单下

1 2
3 4

出于某种原因，我所能做的就是让 RHS 的标题（div“righthead”）与 LHS 的主体（div“main”）内联，如果这有意义的话......

这是代码，请帮助！[我没有很好地解释它，所以如果需要，请要求澄清] - 我也包括了其余部分的所有代码，以防影响它。

<style type="text/css">

.hmenu{ width: 100%; border-bottom: 1px solid black;  }

.hmenu ul{ margin: 0; padding: 0; font: bold 12px Verdana; list-style-type: none; }

.hmenu li{ display: inline; margin: 0; }

.hmenu li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 7px 8px;  border-right: 1px solid white;  color: white; background: #D3D3D3;  }

.hmenu li a:visited{ color: white; }

.hmenu li a:hover, .hmenu li.selected a{ background: #A9A9A9; color:
#008B8B; }

body { font-family: "Verdana", Calibri, Arial, sans-serif; font-size: 12px; text-align: center;  }

div#container { position: relative; width: 849px; margin: 0 auto; text-align: left; }

#header{ width: 100%; background: blue;  border-bottom: 1px solid black; }


#mainhead{ background: #D3D3D3; clear: both; width: 634px; color: white; border-top: 4px solid white; font: 18px Verdana; padding-left: 7px; padding-right: 8px; height: 30px; border-right: 1px solid white; }

#main{ background: #F2F2F2; width: 642px;  height: 800px;  padding-left: 7px; position: absolute; border-right: 1px; float: left; }

#righthead{ float: right; clear: both; background: #D3D3D3; color: white; font: 18px Verdana; width: 191px; padding-left: 7px;   height: 30px; border-left: 1px solid white; }

#right{ clear: both; float: right; background: black; width: 191px;  height: 800px;  padding-left: 7px; border-right: 1px; }



</style>

HTML如下：

<!DOCTYPE html>

<html>
<head>
<title>Black Kite - Home</title>
<link rel="stylesheet" type="text/css" href="css/bk.css"/>
</head>

<body>

<div id="header">

<!-- header --></div>

<div id="container">

<div class="hmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- hmenu --></div>

<div id="mainhead">
About Us
<!-- mainhead --></div>

<div id="righthead">
heading
<!-- righthead --></div>

<div id="main">
<p>some text here. yey. </p>
<!-- main --></div>

<div id="right">
<p>some other here. yey. </p>
<!-- right --></div>

<!-- container --></div> 
</body>
</html>
4

2 回答 2

0

尝试这个：

.hmenu{ width: 100%; border-bottom: 1px solid black; height: 30px;  }

#mainhead{ position: absolute; background: #D3D3D3; width: 634px; color: white; border-top: 4px solid white; font: 18px Verdana; padding-left: 7px; padding-right: 8px; height: 30px; border-right: 1px solid white; }

#main{ background: #F2F2F2; width: 642px;  height: 800px;  padding-left: 7px; border-right: 1px; float: left; }

#righthead{ float: right; background: #D3D3D3; color: white; font: 18px Verdana; width: 191px; padding-left: 7px;   height: 30px; border-left: 1px solid white; }

#right{ float: right; background: black; width: 191px;  height: 800px;  padding-left: 7px; border-right: 1px; }

为 .hmenu 添加了高度，为#mainhead 添加了绝对定位，并删除了 clear:boths。这是你的想法吗？

http://jsfiddle.net/WPHxj/

于 2012-08-04T22:46:03.207 回答
0

绝对与位置属性有关。尝试将 4 个部分的 div 设置为position: relative. 然后你应该能够按照你喜欢的方式定位它。如果仍然不完全正确，请将它们放在更大的内容 div 中，将其设置为一定的宽度，以便只有两个 div 可以在其中彼此相邻。然后将它们的所有浮点属性设置为float:left.

我没有花时间创建自己的 jsfiddle。如果这不能正常工作，请放一个，这样我实际上就可以弄乱代码了。如果您想通过反复试验来学习，位置属性和浮点数可能是您的怀疑对象。祝你好运！

于 2012-08-04T22:48:13.030 回答