Question

所以，我想在格式

的导航菜单下让这些div彼此相邻

1 2
3 4

出于某种原因，我所能做的就是让RHS（div“右头”）的标题与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>

Answer 1

试试这个：

.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/

Answer 2

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

我没有花时间创建自己的jsfiddle。如果这不能正常工作，那就放一个所以我实际上可以搞乱代码。如果你想通过反复试验来学习，你可能会怀疑位置属性和花车。祝你好运！

无法使我的div正确对齐

2 个答案: