Два плавающих divs над изображением

Хорошо, поэтому я получил 1 div, который плавает влево и один с поплавком вправо, теперь по какой-то причине я не могу заставить их идти в ту сторону, где они должны быть. Они своего рода теперь оба перекрывающихся АфоризмДва плавающих divs над изображением

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#main img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#page_left, #page_right { 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: red; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 1000; 
 
}

<div id="main"> 
 
    <img src="img/background.jpg"/> 
 
    <div id="page_left"></div> 
 
    <div id="page_right"></div> 
 
</div>

Я также попытался использовать метод с дисплеем встроенного блока, но оно не работает так хорошо

источник

2016-12-21 Tomislav Nikolic

не уверен, что вы спрашиваете, вы можете показать изображение того, что вы хотите достичь? –

Попробуйте с дополнительной CSS

CSS

#page_left, #page_right { 
    width: 50%; 
    height: 100%; 
    background-color: red; 
    position: absolute; 
    top: 0px; 
    z-index: 1000; 
} 

#page_left { 
    left: 0; 
} 

#page_right { 
    right: 0; 
}

источник

2016-12-21 04:08:57 aavrug

О, я не знал, что ты можешь просто так сделать, интересно! Спасибо, что сработал! –

В основном вы добавили '' 'position: absolute''', а также' '' left: 0''', которые переопределили ваш стиль '' 'float'''. Вы можете использовать '' 'float''' или' '' position''' с '' '' '' '' '' '' '' '' '' '' '' ''. – aavrug

#page_left, #page_right { 
    width: 50%; 
    height: 100%; 
    background-color: red; 
    position: absolute; 
    top: 0px; 
    z-index: 1000; 
}

удалить left: 0px

ИЛИ

удалить position: absolute

#page_left, #page_right { 
    width: 50%; 
    height: 100%; 
    background-color: red; 
    z-index: 1000; 
}

источник

2016-12-21 04:09:24 Hezron

переливной в случившемся, потому что вы дали слева: 0px и позицию: абсолютная для обоих дивы, я решил это и добавил ниже фрагмент.

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
html, body { 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
#main { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
} 
 

 
#main img { 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
#page_left, #page_right { 
 
\t width: 50%; 
 
\t height: 100%; 
 
\t background-color: red; 
 
\t position: absolute; 
 
\t 
 
\t top: 0px; 
 
\t z-index: 1000; 
 
} 
 
#page_left{ 
 
    left: 0px; 
 
} 
 
#page_right{ 
 
    background-color:green; 
 
    float:right; 
 
    position: absolute; 
 
right: 0px; 
 
    
 
    }

<!DOCTYPE HTML> 
 

 

 

 
<html> 
 

 
\t <head> 
 
\t </head> 
 
\t 
 
\t 
 
\t <body> 
 
\t \t <div id="main"> 
 
\t \t \t <img src="img/background.jpg"/> 
 
\t \t \t <div id="page_left"> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div id="page_right"> 
 
\t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 

 
</html>

источник

2016-12-21 04:32:17

Два плавающих divs над изображением

ответ

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