2015-05-12 2 views
2

У меня есть две таблицы стилей .SCSS, вносящие вклад в один веб-сайт. Это так, что я могу иметь базу и домашнюю таблицу стилей.Как остановить div от наследования родительского стиля css

В таблице базового стиля div имеет поплавок слева, однако в разделе «Что мы делаем» я хочу, чтобы там не было поплавка. Кажется, я не могу исправить эту проблему. Любой совет будет очень благодарен!

Вот JSFiddle - https://jsfiddle.net/hbyeyv6y/

Вот база .scss -

body, html, div, nav, section, ul, li, header { float: left; margin: 0px; padding: 0px; } 

Вот то, что мы делаем - .scss

div.whatwedo { box-sizing: border-box; margin: 0 auto; background-color: #366e81; padding: 100px; text-align: center; width: 100%; } 
    div.whatwedo .inner { float: none; } 
    div.whatwedo h1 { color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 45px; } 
    div.whatwedo h2 { margin-top: -15; color: #8e8e8e; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 25px; } 
    div.whatwedo h3 { margin-top: -15; color: #fff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 20px; } 
    div.whatwedo p { margin: 0 auto; color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 15px; max-width: 500px; } 
    div.whatwedo hr { border-bottom: 1px solid #fff; margin-bottom: 50px; width: 100px; } 
    div.whatwedo div.container { vertical-align: top; display: inline-block; text-align: center; } 
    div.whatwedo div.container img { margin: 50px 25px 0 25px; width: 231px; height: 231px; } 
    div.whatwedo div.container p { margin-top: 20px; display: block; max-width: 210px; } 
+0

перезаписывается' 'float' для div.whatwedo .inner'. Правильно, проблема? – panther

+0

Спасибо, Пантера, когда я это делаю, мой фон становится полубелым, а контент по-прежнему не центрирован. –

+0

http://i61.tinypic.com/2ajx83b.jpg –

ответ

2

Как сказал, вы могли бы сделать float: none !important; и initial !important; по другим правилам. Но если вы хотите написать хороший код, приписывание float to body, html и т. Д. Не похож на хорошую идею. Float нарушает обычное поведение элементов, и это может привести к неожиданным результатам. Вы можете добавить такие вещи, как:

.f-left{ 
    float:left; 
} 

Только элементы, которые вы хотите поплавать.

1

.whatwedo не плавает - все это родители, и все его потомки. Установка поплавка на все плохо; зачем вам все плавать?

Даже так, чтобы ответить на ваш вопрос - вы можете сбросить поплавок для всех .whatwedo «S потомков с селектором подстановочные ...

.whatwedo * {float: none;} 
Смежные вопросы