Question

我正在尝试从我的内容中添加右侧边栏，但它会在其下方添加。我真的不明白问题是什么，我已经尝试过改变一切，但它仍然不起作用。

CSS：

body {
    font: 10pt Calibri, Helvetica; /* Шрифт на веб-странице */
    background: #E8E8E8; /* Цвет фона */
    margin: 0; /* Убираем отступы */
}
h2 {
    font-size: 1.1em; /* Размер шрифта */
    color: #1C1C1C; /* Цвет текста */
    margin-bottom: 0; /* Отступ снизу */
}
#wrapper {
    width: 990px; /* ширина обертки */
    margin: 0 auto; /* отцентровка */
}
#header{  
   width:100%; 
   height:150px;
   background-color:#0000FF;
   color:#1C1C1C;
   font-size: 20px;
}
#sidebar {
    width: 250px; /* ширина меню */
    height: 300px; /* высота меню */
    float: right; /* выравнивание по правому краю */
    background: #FF69B4; /* фон меню */
}
#content {
    background: #FF4500; /* фоновый цвет контента */
    margin-right: 220px; /* Отступ слева */
    width: 700px;/*ширина*/
    word-break: break-all;/*перенос слов*/
    color:#1C1C1C;
    font-size: 10px;
}
#footer {
    height: 50px; /* высота футера */
    color: #fff; /* цвет текста */
    background: #000; /* фон */
    clear: both; /* прерывание обтекания */
}

我的一个页面：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
</style>
</head>
<body>
<div id="header">
<h1>Образовательные программы </h1>
<table border="0" cellpadding="50">
<tr>
<th><a href='/first.php' target="content" style="color: #E8E8E8">Главная</a></th>
<th><a href='/search.php' target="content" style="color: #E8E8E8">Поиск</a></th>
<th><a href='/2.php'target="content" style="color: #E8E8E8">Задать вопрос</a></th>
<th><a href='/3.php'target="content"style="color: #E8E8E8">Контакты</a></th>
<th><a href='/all_list.php'target="content" style="color: #E8E8E8">Админка</a></th>
<th><a href='/category.php'target="content" style="color: #E8E8E8">Категории</a>           </th>
</tr>
</table>
</div>
<div id="wrapper">
<div id="content">
<h1 align="center">Страница администратора</h2>
<?php
 $conn = mysql_connect ("localhost", "root", "") or die ("Соединение не установлено!");
 mysql_select_db('university'); // выбор БД
 mysql_query("SET NAMES 'utf8'"); // кодировка
 echo '<table border="1" cellspacing="0" cellpadding="12" align="center">';
 echo '<thead>';
 echo '<tr>';
 echo '<th>ID</th>';
 echo '<th>Название</th>';
 echo '<th>1</th>';
 echo '<th>2</th>';
 echo '</tr>';
 echo '</thead>';
 echo '<tbody>';
 $res = mysql_query("SELECT * FROM news");
 while($news = mysql_fetch_assoc($res)) {?>
 <tr>
 <td><a href="detail.php?id=<?=$news['id']?>"><?=$news['id']?></td>
 <td><a href="detail.php?id=<?=$news['id']?>"><?=$news['program']?></td>
 <td><a href="delete.php?id=<?=$news['id']?>">Удалить</td>
 <td><a href="edit_form.php?id=<?=$news['id']?>">Редактировать</td>
 </tr><?
 }?>
 </tbody></table>
 <form name="add" action="add_form.php">          
 <p><input type="submit" value="Добавить программу"></p>
 </div>
 <div id="sidebar">
<h2>Here i will have sidebar</h2>
</div>
</div>
</body>
 </html>

Answer 1

您的数学运算完全不同步：您的#wrapper设置为990px。

#content width + #content margin + #sidebar width ...
700px + 220px + 250px = 1170px

增加包装或减少#content

上的保证金

Answer 2

您的布局效果不佳..您的ID header宽度为100%，而ID wrapper为990px。

使用百分比或使用px值。
如上所述，您的内部div widths超出使用margin和width
将float:left提供给ID content and sidebar，并在%中提供宽度
使用Firebug我可以看到标记为slidebar的div。

我希望清除所有这些混乱，你的布局将会修复。

侧边栏低于内容

2 个答案: