Я тестировал, как сделать отзывчивый дизайн. Появилась эта проблема. Я думал, что поведение дефа по умолчанию состояло в том, чтобы обернуть дочерние элементы, и их общая ширина становится шириной div.
Ссылка на JSfiddle: http://jsfiddle.net/adithyavr/jEEd4/
В приведенном выше примере см. #Search_area. Эта ширина div должна соответствовать внутреннему текстовому полю и поле поиска. Но он принимает ширину HTML-тега, равную 1280 px. W
#search_area{
height: 100%;
position:relative;
left:50%;
top:20%;
}
Почему эта особая ошибка происходит. Мне подскажет подсказка.
заранее спасибо. Ниже приведен снимок экрана.
Ваш css
#header_area{
background:#B50E24;
width:100%;
height:10%;
}
вы указали width:100%
следовательно, она будет занимать 100% ширины.
Кроме того, <div>
является block
элементом. block
элементы принимают полную доступную ширину. Если вы хотите, чтобы он обертывал только весь контент, display: inline-block