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に絶対位置を追加し、クリア：両方を削除しました。これはあなたが考えていたものですか？

http://jsfiddle.net/WPHxj/

于 2012-08-04T22:46:03.207 に答える
0

間違いなく位置属性と関係があります。4つのセクションのdivをに設定してみてくださいposition: relative。そうすれば、好きなように配置できるはずです。それでも正しくない場合は、より大きなコンテンツdiv内に配置し、特定の幅に設定して、2つのdivのみが隣接して収まるようにします。次に、すべてのfloat属性をに設定しますfloat:left。

私は自分のjsfiddleを作成するのに時間をかけませんでした。これがうまく機能しない場合は、実際にコードをいじることができるように、1つ上げてください。試行錯誤で学びたい場合は、位置属性とフロートが疑わしいと思われます。幸運を！

于 2012-08-04T22:48:13.030 に答える