Как получить стороны плавающего Div Flush со страницей?

Итак, у меня есть div, который мне нужен на одном уровне с левым и правым краями страницы. Он также должен реагировать на текущий макет (чтобы размер страницы мог изменяться). Насколько я знаю, самый эффективный способ сделать это — использовать плавающий макет. Как мне сделать так, чтобы края div были на одном уровне с краями экрана? Вот мой текущий CSS:

#work {
    float: left;
    width: 100%;
    height: 500px;
    background: #fff;
}

Я пробовал слева: 0px и справа: 0px, что, очевидно, не сработало (вероятно, потому что оно плавающее...)

В случае, если нет способа сделать это, как мне заставить его сбрасываться, но при этом реагировать на остальную часть страницы? У меня такое ощущение, что это один из тех извечных вопросов новых веб-разработчиков...


html css divider floating
person Tommay    schedule 12.12.2014    source источник
comment
не могли бы вы создать jsfiddle.net с вашим html и любым другим css пожалуйста   -  person haxxxton    schedule 12.12.2014
comment
Ага. Это основная идея: jsfiddle.net/x6duerbd   -  person Tommay    schedule 12.12.2014

Ответы (2)


arrow_upward
0
arrow_downward

Вы не должны использовать поплавки для такого базового макета.

Убедитесь, что вы сбрасываете добавленные браузером поля и отступы по умолчанию, тогда вы можете просто использовать display: inline-block, чтобы делать то, что хотите.

* { margin:0; padding:0 }

div {
    display: inline-block;
    width: 100%;
    height: 500px;
    background: dodgerblue;
}
<div></div>

person Zaqx    schedule 12.12.2014
comment
Это сработало, но отступы и поля всех остальных элементов на странице были сброшены на 0. Имейте в виду, что у меня есть контент выше этого. Все сморщилось вверху (как и ожидалось). Есть ли другой способ? - person Tommay; 12.12.2014
comment
Поля и отступы браузера различны для каждого браузера. Вы уже проверили свой сайт в Firefox? Что с ИЕ. Вы, вероятно, заметите некоторые различия, которые вы не хотите создавать из-за их разных значений полей/отступов по умолчанию. Использование звездочки — это суперсупер общее правило, гарантирующее, что вы всегда начинаете с ожидаемого поля/отступа. Мой вам совет: повторно добавьте эти поля/отступы к нужным вам элементам и двигайтесь дальше. Хотя вы можете выборочно сбросить поля и отступы только для этой одной области, я бы не советовал этого делать. - person Zaqx; 12.12.2014

arrow_upward
0
arrow_downward

Прежде всего, рассмотрите свой адаптивный фреймворк, и вы сможете сделать это буквально с помощью одной строки кода. Все адаптивные фреймворки (Bootstrap, Foundation, скелетон и т. д.) имеют полноразмерный класс.

Поскольку я использую Bootstrap в 99,99% случаев и советую вам делать то же самое, я покажу вам его.

<div class="container-fluid thisContainer">

</div>

.thisContainer{
    background:#ccc;
    height:200px;
 }

И это все! Это просто! Вот демонстрация, если вы хотите поиграть с ней

ДЕМО

person LOTUSMS    schedule 12.12.2014
comment
Вы предлагаете почти всегда использовать бутстрап в любом проекте? Это действительно хороший совет? Без сарказма, я действительно хотел бы знать, почему для вас необходимо постоянно использовать CSS-фреймворк? - person mikeLspohn; 12.12.2014
comment
Да, я мог бы использовать Bootstrap, но, будучи новичком в кодировании, я пытаюсь узнать все, что могу, о том, как работает CSS, и поэтому хочу знать, как это сделать самостоятельно. Я не хочу зависеть ни от чего другого. Это буквально ЕДИНСТВЕННЫЙ способ сделать это? Я имею в виду, что это не может быть редкой проблемой... - person Tommay; 12.12.2014
comment
Bootstrap — наиболее коммерчески используемый интерфейсный фреймворк. Он очень надежный, надежный, и его javascript не похож ни на что другое. Не говоря уже о том, что они создают сотни удобных для Bootstrap дополнительных jqueries, которые вы можете добавить для расширения функциональности. Я работаю с очень крупными проектами и профессиональными средами (например, с социальным обеспечением штата Пенсильвания, Департаментом по делам ветеранов и Pennsylvania CareerLink). идти. По моему мнению. Я уверен, что многие разработчики здесь согласятся - person LOTUSMS; 12.12.2014
comment
Да, с Bootstrap все в порядке, но я хочу иметь возможность делать это вручную, чтобы расширить свое понимание языка. Это действительно так сложно? - person Tommay; 12.12.2014
comment
Если вы хотите создать отзывчивую систему с нуля, вперед. Я хвалю вас за это. Но я думаю, вы узнаете больше, используя встроенный. Таким образом, вы знаете, как это должно выглядеть. В любом случае вам все равно придется изменить адаптивные классы, чтобы они соответствовали вашему сайту. Но обязательно вперед! Приступайте к делу. Вы определенно будете здесь много, но вы узнаете - person LOTUSMS; 12.12.2014