2012-06-06 2 views
1

HTML кодабсолютное положение проб в CSS

<body> 
     <div id="container"> 

       <div id="left"> 
          <h2>rerererere</h2> 
       </div> 
       <div id="right"> 
          <h2>sdadsad</h2> 
       </div> 
     </div> 
</body> 

CSS файл

div#container { 
position: relative; 
    border: 1px solid #000; 
} 

#left { 
    position: absolute; 
    width: 480px; 
    height: 480px; 
    border: 1px solid #0092ef; 
      /*  blue*/ 
} 

#right { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    bottom: 10px; 
    width: 250px; 
    border: 1px solid #783201; 
      /*  brown*/ 
} 

, когда я использую только правильный DIV как абсолют, чем нет никаких проблем. Но когда я использую абсолютный как в левом, так и в правом div. правый div становится как маленьким. Я новичок в css. Так что это может быть вопрос о нобе. Почему, если я положил два абсолютных div под относительным div, не работает? Пожалуйста, помогите мне.

ответ

4

Ваше право <div> рушится, потому что вы не указали фиксированную высоту для него в своем CSS, вот и все.

+0

Когда я использую height = 480px Это нарушает границу контейнера. Я использую относительный макет в контейнере и абсолютный слева и справа, потому что я знал, что правый и левый div останутся внутри контейнера. Есть что-нибудь? –

+0

@ Diptopol Dam ... Ну, похоже, что правая коробка выходит за пределы контейнера, потому что у вас есть «верх» и «правый» набор. Просто рассмотрите размеры всех задействованных элементов и при необходимости отрегулируйте их. Вы также можете добиться того, что после использования float вместо абсолютного позиционирования, которое также устраняет проблему сбрасывания. – Tom

1

Ваше право DIV не имеет высоту указанного, поэтому он падает на высоту строки.

Плюс удалить bottom: 10px; в правом div, так как это избыточно, поскольку указана верхняя величина.

Смежные вопросы