При добавлении боковой панели основное содержимое перемещается с экрана

#html #css #sidebar

#HTML #css #боковая панель

Вопрос:

Проблема в том, что когда я добавил боковую панель шириной 230 пикселей и добавил левое поле к основному тексту 230 пикселей, то в этом случае вместо уменьшения ширины основного текста содержимое перемещается с экрана. вот такой сценарий.

 <body style="margin-left:230px;">

<aside style="position:absolute;left:0;width:230px;">content here
</aisde>

<header>
</header>

<section>
</section>

<section>
</section>
</body>
  

В этом случае содержимое тела сжимается, но содержимое выходит за пределы тела

Комментарии:

1. У вас есть что-то шириной 230 пикселей, и вы перемещаете его на 230 пикселей влево, конечно, это не отображается.

2. просто добавьте позицию: относительная в теле <стиль тела=»margin-left: 230px; позиция: относительная;»> </body>

3. Я хочу уменьшить тело, как это происходит в некоторых приборных панелях,

4. хорошо, если вы хотите, чтобы тело находилось в центре, и оставляете пустое пространство справа и слева?

5. на самом деле я конвертирую в drupal, когда в коде добавлено меню администратора drupal, оно дает ширину меню 230 пикселей, а поле тела 230 пикселей слева, но содержимое удаляется от тела. мне нужно, чтобы содержимое уменьшалось по оставшейся ширине.

Ответ №1:

Привет, сначала вы не закрыли, попробуйте сначала исправить это. Тогда использование margin left не является лучшим решением в каждом случае, например, альтернативой margin-top: 20px; margin-left: 20px; было бы:

 <div id="outer">
<div id="inner">
</div>
</div>  
<style>
#outer { position:relative; }
#inner { position:absolute; top:20px; left:20px; }
</style>
  

и почему вы использовали абсолютную позицию? используйте положение: относительное