Как увеличить div по горизонтали по его содержимому?

пожалуйста, кто-нибудь может мне объяснить, почему красный div не расширяется вправо? Он останавливается там, где заканчивается экран. Что мне нужно сделать, чтобы он расширился?

Одна вещь, которая работает, - это "display: table-cell" красный div, но мне было интересно, есть ли другой способ и почему это происходит ...?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>
</body>
</html>

html css expand autogrow
person Community    schedule 30.01.2009    source источник
comment
Хорошее открытие. Это очень странно. Я хотел бы посмотреть, найдет ли кто-нибудь решение без использования table-cell или float.   -  person Brian Kim    schedule 30.01.2009
comment
Вы всегда можете использовать HTML вместо XHTML :)   -  person nailitdown    schedule 30.01.2009
comment
@nailitdown Надеюсь, это просто шутка. Я ненавижу HTML без XML-сериализации. Личное мнение… :-p   -  person Constantino Tsarouhas    schedule 25.02.2012

Ответы (9)


arrow_upward
3
arrow_downward

Это действительно странно. Попробуйте спустить внешний:

<div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>
person Crescent Fresh    schedule 30.01.2009
comment
Я думаю, что плавание следует использовать только для ... ну, на самом деле, чтобы что-то плавать. Чрезмерное использование float может стать большим беспорядком. Установка ширины на авто должна работать. - person Brian Kim; 30.01.2009
comment
Хотя я лично не думаю, что плавающее является единственным решением здесь, это лучше всего работает во всех браузерах, а таблица-ячейка - нет. Голосование против удалено. знак равно - person Brian Kim; 30.01.2009

arrow_upward
2
arrow_downward

Div, в котором он содержится, меньше 2000 пикселей. Вам нужно сделать что-то вроде этого:

  <div style="background-color: #f00; width: 2000px;">
    <div style="width: 2000px; height: 100px; " />
  </div>

Конечно, теперь не нужно указывать внутреннюю ширину div, если она не отличается от ширины внешнего div.

person Paige Ruten    schedule 30.01.2009

arrow_upward
2
arrow_downward

Поместите overflow: auto; в стиль родительского <div>.

person Bari    schedule 16.03.2011

arrow_upward
1
arrow_downward 

  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>

Подобное закрытие тега DIV (т. Е. Самозакрывающегося тега) вызовет проблемы.

Это может быть законным (См. эту тему SO), но, по моему опыту, это часто вызывает странное поведение.

Однако проблема не в этом. Следующий код работает в Chrome и IE9.

  <div style="background-color: #f00; display: inline-block; height: 100px;">
    <div style="width: 3000px; background-color: blue; height: 50px;">
        here is some content
      </div>
  </div>

Display: inline-block; указывает элементу расти настолько (или меньше), насколько это необходимо.

Сценарий: http://jsfiddle.net/sArvr/

Это действительно кажется противоречащим интуиции поведением.

person Tim Medora    schedule 17.12.2011

arrow_upward
1
arrow_downward

Проверьте с этим. он будет расширять контейнер по мере продолжения текста ...

    <div style="background-color: #f00; height: 100px; display: inline-block;">
      <div style="background-color: blue; height: 50px; white-space:nowrap; display: inline-block;">
        here is some content
      </div>
    </div>
person Prasanth K C    schedule 17.12.2011

arrow_upward
0
arrow_downward

В зависимости от того, для чего вы это используете, я предполагаю, что элемент div будет в центре внимания страницы; в этом случае вы можете взять эту строку width: 2000px; и просто применить ее к телу, а не непосредственно к элементу уровня блока, который вы хотите растянуть:

<style>
body
 {
width: 2000px;
 }
</style>

Если этот метод не работает для вас по какой-либо причине, создание прозрачного пиксельного изображения и присвоение ему необходимой ширины также должно работать.

person Hexagon Theory    schedule 30.01.2009

arrow_upward
0
arrow_downward

Ширина внутреннего div может измениться, мне нужно увеличить внешний, поэтому я не могу присвоить ему ширину.

person Community    schedule 30.01.2009

arrow_upward
0
arrow_downward

Кажется, что максимальная ширина родительского div ограничена шириной экрана браузера, хотя ширина дочернего div превышает ширину экрана браузера. Странное открытие ...

Я предлагаю использовать float для родительского div. (ref: crescentfresh) Я знаю, что уверен, что таблица-ячейка не работает для IE6. И быстрый тест IE7 на моей машине тоже не работает, хотя должен ...

Это должно сработать. (РЕДАКТИРОВАТЬ: это не работает ...)

<div style="background-color: #f00; width: auto;">
  <div style="width: 2000px; height: 100px; "></div>
</div>
person Brian Kim    schedule 30.01.2009

arrow_upward
0
arrow_downward

положить <div style="min-height: 100px; " />

когда вы увеличиваете контент больше, наш div должен автоматически увеличивать свой размер.

person Selvin    schedule 12.01.2012