Как выращивать div по горизонтали по содержанию?

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

Одна вещь, которая работает, - это "показать: 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>

Ответы

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

    <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>

Ответ 5

  <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; указывает, что элемент будет расти как можно больше (или как можно меньше).

Fiddle: http://jsfiddle.net/sArvr/

Это похоже на противоинтуитивное поведение.

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

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

Это должно сработать. (EDIT: Это не работает...)

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

Ответ 9

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

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