центрирование div с помощью css, но не перемещение по боковой панели - PullRequest
Новая
       6

центрирование div с помощью css, но не перемещение по боковой панели

0 голосов
/ 14 марта 2012

Я хочу центрировать div в середине браузера, но я не хочу, чтобы центрированный div проходил через мою боковую панель (над красной боковой панелью).

Я использую абсолютную позицию для обоих <div>. Я пытался с относительной и плавающей, но безрезультатно.

Обновление:

Извините за плохое объяснение, но мой вопрос был, если я изменю размер браузера и сделаю его таким маленьким, центрированный контент переходит на боковую панель.

Я хочу, чтобы центрированный контент переместился в центр, но я не хочу перекрывать боковую панель, когда ширина браузера мала.

Вот код: 

<body>
    <div id="sidebar"> sidebar stuff </div>
   <div id="distance"></div>
   <div id="content">
      <!-- absolutely centered content -->
   </div>

</body>

<style type="text/css">
 html, body {
    height: 100%;         
}
body {
    text-align: center;   
    padding: 0;           
    margin: 0;          
}
#sidebar {
    position:absolute;
    top:0;
}
#distance { 
    margin-bottom: -10em; 
    background: red;     
    width: 1px;          
    height: 50%;          
    float: left;         

}
#content {
    position: relative;   
    text-align: left;     
    height: 20em;         
    width: 40em;          
    background: blue;     
    margin: 0 auto;       
    clear: left;         
}
  </style>

Ответы [ 2 ]

0 голосов
/ 14 марта 2012

Трудно точно определить, что вы хотите от вопроса, но здесь идет речь:

http://jsfiddle.net/BFmbQ/4/

<body>
   <div id="content">
       <!-- absolutely centered content -->
       <div id="sidebar"> sidebar stuff </div>
   </div>
</body>​

<style type="text/css">
html, body {
    height: 100%;         
}
body {
    text-align: center;   
    padding: 0;           
    margin: 0;          
}
#sidebar {
    position:absolute;
    top:0;
    right:-200px;
    width: 200px;
    height:200px;
    background: red;
}
#content {
    position:relative;
    text-align: left;     
    height: 20em;         
    width: 40em;          
    background: blue;     
    margin: 0 auto;        
}
</style>​

Независимо от ширины боковой панели, сделайте правильное положение отрицательным от того же количества.

0 голосов
/ 14 марта 2012

Я не уверен, что именно вы имеете в виду, но попробуйте мою jsfiddle demo .Я подумал, что вам нужно, чтобы у вас была боковая панель определенной ширины, и вы хотите расположить div с учетом этой боковой панели.

Я использовал display:inline-block, поэтому она не будет работать в IE7. ОБНОВЛЕНИЕ: Правин Виджаян в приведенном ниже комментарии упомянул, что добавление zoom: 1 и *display: inline исправит IE7

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...