Делает ли тег тег autowrapp дочерние элементы?

Question

Делает ли тег тег autowrapp дочерние элементы?

0

Я тестировал, как сделать отзывчивый дизайн. Появилась эта проблема. Я думал, что поведение дефа по умолчанию состояло в том, чтобы обернуть дочерние элементы, и их общая ширина становится шириной div.

Ссылка на JSfiddle: http://jsfiddle.net/adithyavr/jEEd4/

В приведенном выше примере см. #Search_area. Эта ширина div должна соответствовать внутреннему текстовому полю и поле поиска. Но он принимает ширину HTML-тега, равную 1280 px. W

  #search_area{
            height: 100%;
            position:relative;
            left:50%;
            top:20%;
           }

Почему эта особая ошибка происходит. Мне подскажет подсказка.

заранее спасибо. Ниже приведен снимок экрана.

Adithya 13 март 2014, в 12:21

Источник

0

Нет, не проверяйте ваш элемент с помощью firebug или любого другого инспектора
Vinay Pratap Singh 13 март 2014, в 11:11
0

Именно поэтому я разместил вопрос. Также я добавил скриншот сейчас для того же. Пожалуйста, проверьте. Это происходит как в Firefox, так и в IE.
Adithya 13 март 2014, в 11:15

Теги:

html

1 ответ

Ещё вопросы

Нет, не проверяйте ваш элемент с помощью firebug или любого другого инспектора
Именно поэтому я разместил вопрос. Также я добавил скриншот сейчас для того же. Пожалуйста, проверьте. Это происходит как в Firefox, так и в IE.

T J · Accepted Answer · 2014-03-13T09-33-00.000Z

Ваш css

#header_area{
 background:#B50E24;
 width:100%;
 height:10%;
}

вы указали width:100% следовательно, она будет занимать 100% ширины.

Кроме того, <div> является block элементом. block элементы принимают полную доступную ширину. Если вы хотите, чтобы он обертывал только весь контент, display: inline-block

Просто чтобы уточнить, div по умолчанию увеличит максимальную доступную ширину, даже если у вас есть только 200px детей? Причина в том, что он настроен на отображение: блок по умолчанию?
Блочный элемент - это элемент, который занимает всю доступную ширину и имеет разрыв строки до и после него. - w3schools.com/css/css_display_visibility.asp