Не работает свойство "display: block" на CSS почему?

20

taracov

13 марта 2013, 09:04

6850

<html>

<head>

<title>Display</title>

<style type="text/css">

.mar {display: block}

</style>

</head>

<body style="margin: 0; background: #0033FF">

<div style="background: #9900CC; clear: both; padding: 5px">Шапка</div>

<div style="background: #00CC00; float: left; padding: 5px; width: 100px">меню</div>

<div class="mar" style="background: #0033FF; float: right; padding: 5px; width: 190px">Реклама</div>

<div class="mar" style="background: #0033FF; float: right; width: 190px">Рекламs</div>

<div style="background: #33FFCC; padding: 5px; margin: 0 180px;">просто текст<br><br><br><br><br>Текст</div>

<div style="background: #CCFF00; clear: both; padding: 5px;">Самый низ</div>

<div>

</body>

</html>

Вроде бы очень простой код, но почему не работают блоки "Реклама" и "Рекламs" поидее они должны быть в столбик но они почему-то в строчку? Что изменить?

160

maldivec

13 марта 2013, 09:11

#1

Потому что у них задан float: right;

T

20

taracov

13 марта 2013, 09:14

#2

maldivec:
Потому что у них задан float: right;

Ну, дык получается что в правой части экрана должны распологаться блоки друг под другом? Или тогда как это реализовать с помощью CSS ? (Спасибо за ответ)

160

maldivec

13 марта 2013, 09:18

#3

taracov:
Ну, дык получается что в правой части экрана должны распологаться блоки друг под другом?

Не получается. Вы им обоим обтекание задаете.

Оберните их в дополнительный div и ему float задайте.

И не надо никаких display: block, div и так блочный элемент.

487

Geers

13 марта 2013, 09:19

#4

taracov:
Ну, дык получается что в правой части экрана должны распологаться блоки друг под другом? Или тогда как это реализовать с помощью CSS ? (Спасибо за ответ)

Самое простое решение)

<div style="background: #00CC00; float: left; padding: 5px; width: 100px">меню</div><br>

<div class="mar" style="background: #0033FF; float: right; padding: 5px; width: 190px">Реклама</div><br><br>

S

41

sdaprel

13 марта 2013, 09:22

#5

Нужно обернуть эти два блока в div и уже его прижать к правой стороне.

Кодинг на PHP. Разработка расширений под Joomla.

T

20

taracov

13 марта 2013, 09:23

#6

maldivec:
Не получается. Вы им обоим обтекание задаете.

Оберните их в дополнительный div и ему float задайте.

<html> 

<head> 

<title>Display</title> 

<style type="text/css"> 

</style> 

</head> 

<body style="margin: 0; background: #0033FF"> 

<div style="background: #9900CC; clear: both; padding: 5px">Шапка</div> 

<div style="background: #00CC00; float: left; padding: 5px; width: 100px">меню</div> 

<div style="background: #0033FF; width: 190px"><div style="float: right">Реклама</div></div> 

<div style="background: #0033FF; width: 190px"><div style="float: right">Рекламs</div></div> 

<div style="background: #33FFCC; padding: 5px; margin: 0 180px;">просто текст<br><br><br><br><br>Текст</div> 

<div style="background: #CCFF00; clear: both; padding: 5px;">Самый низ</div> 

<div> 

</body> 

</html>

Это будет выглядеть так? Если нет то как понять "Оберните их в дополнительный div и ему float задайте" ммм? (спасибо за ответ)!

S

41

sdaprel

13 марта 2013, 09:29

#7

<html> 

<head> 

    <title>Display</title> 

    <style type="text/css"> 

    </style> 

</head> 

<body style="margin: 0; background: #0033FF"> 

    <div style="background: #9900CC; clear: both; padding: 5px">Шапка</div> 

    <div style="background: #00CC00; float: left; padding: 5px; width: 100px">меню</div>

    <div  style="float: right">

         <div style="background: #0033FF; width: 190px">Реклама</div> 

         <div style="background: #0033FF; width: 190px">Рекламs</div>

    </div> 

    <div style="background: #33FFCC; padding: 5px; margin: 0 180px;">просто текст<br><br><br>   <br><br>Текст</div> 

     <div style="background: #CCFF00; clear: both; padding: 5px;">Самый низ</div> 



</body> 

</html>

T

20

taracov

13 марта 2013, 09:32

#8

sdaprel:

<html> 

<head> 

    <title>Display</title> 

    <style type="text/css"> 

    </style> 

</head> 

<body style="margin: 0; background: #0033FF"> 

    <div style="background: #9900CC; clear: both; padding: 5px">Шапка</div> 

    <div style="background: #00CC00; float: left; padding: 5px; width: 100px">меню</div>

    <div  style="float: right">

         <div style="background: #0033FF; width: 190px">Реклама</div> 

         <div style="background: #0033FF; width: 190px">Рекламs</div>

    </div> 

    <div style="background: #33FFCC; padding: 5px; margin: 0 180px;">просто текст<br><br><br>   <br><br>Текст</div> 

     <div style="background: #CCFF00; clear: both; padding: 5px;">Самый низ</div> 



</body> 

</html>

Ааааа, тоесть получается что я, каждую рекламу оборачивал в <div> а нужно их было вместе 2 рекламы сгруппировать, я правильно понял?

S

41

sdaprel

13 марта 2013, 09:44

#9

taracov:
Ааааа, тоесть получается что я, каждую рекламу оборачивал в <div> а нужно их было вместе 2 рекламы сгруппировать, я правильно понял?

Да, div это есть блок, без float они встанут друг под другом.

1

T

20

taracov

13 марта 2013, 09:46

#10

sdaprel:
Да, div это есть блок, без float они встанут друг под другом.

Спасибо, большое вы мне очень помогли!

Переиграть и победить: как анализировать конкурентов для продвижения сайта

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах