0

Webサイトを作成していますが、divの配置に問題があります。両方とも左に浮かんでいるのに、横に配置content divしていません。navigation-bar div

これがHTMLコードです。 

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

<body>

<div id="title">
Sample Title
</div>


<div id="navigation-bar">
Home
<br>
<br>
Products
<br>
<br>
</div>

<div id="content">
content goes here
</div>

</body>

</html>

これがtheme.cssファイルです

#title
{
color: black;
padding: 20px;
font-size: 250%;
padding: 2%;
width: 70%;
height: 10%;
border: 4px solid blue;
}

#navigation-bar
{
background-color: #606060;
width: 15%;
height: 70%;
color: white;
text-align: center;
padding: 2%;
font-size: 80%;
border: 4px solid blue;
}

#content
{
border: 4px solid blue;
float: left;
width: 20%;
height: 70%;
}

問題は、navigation-bar divとのcontent div位置が隣り合っており、代わりにcontent div自分自身を下に配置していることnavigation-bar divです。

ありがとう。

4

2 に答える 2

2

float: leftにを追加してみませんか#navigation-bar

デモ

于 2012-12-22T20:21:51.123 に答える
2

どこで使用float: left;してい#navigation-barますか？

#navigation-bar
{
   background-color: #606060;
   width: 15%;
   height: 70%;
   color: white;
   text-align: center;
   padding: 2%;
   font-size: 80%;
   border: 4px solid blue;
   float: left; <--- Add this Here
}
于 2012-12-22T20:22:08.723 に答える