2015-07-04 6 views
1

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

Любые идеи, что мне делать?

Вот мой HTML структура:

<div class="wrapper"> 
<div class="intro"> 
<div class="iPhone"> 
</div> 

И это мой CSS:

.wrapper { 
position: absolute; 
float: right; 
} 

.intro { 
float:left; 
background-size:cover; 
} 

.iPhone { 
float:left; 
} 
+0

Я удалил плавающие стили, и это все равно. –

+0

Они не в обратном порядке (я только что пробовал ваш код, и он работает) – Wazaaaap

+3

Ваш HTML выглядит странно ... вы не закрыли div внутри обертки. –

ответ

0

Просто пару вещей ..

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

  2. Не забудьте закрыть дивы, может быть некоторые браузеры могут испортить ваш код, потому что вы не добавить </div> тега

Я протестировал ваш код и, похоже, сделал все в порядке, вставку слева и iPhone справа. Посмотрите это в своем браузере (я бы добавил несколько цветов, ширины и высоты, чтобы это продемонстрировать)

<html> 
    <head> 
    <style type="text/css"> 

     .wrapper { 
      position: absolute; 
      float: right; 
      background-color: red; 

      width: 300px; 
      height: 300px; 
     } 

     .intro { 
      float:left; 
      background-size:cover; 

      background-color: blue; 
      width: 50%; 
      height: 100%; 
     } 

     .iPhone { 
      float:left; 

      background-color: green; 
      width: 50%; 
      height: 100%; 

     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="intro"></div> 
     <div class="iPhone"/></div> 
    </div> 
</body> 
</html> 
0

Вы забыли окончательные теги внутри контейнера. Если вы используете float, когда вам нужно использовать некоторый класс .clearfix для родительского контейнера, они отображаются правильно. Добавить это обертка:

.clearfix:after { 
display: table; 
content: ""; 
clear: both; 
} 
Смежные вопросы