Как вырастить div по горизонтали по его содержимому? - PullRequest
Новая
       17

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

14 голосов
/ 30 января 2009

пожалуйста, может кто-нибудь объяснить мне, почему красный 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>

Ответы [ 9 ]

3 голосов
/ 30 января 2009

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

<div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>
2 голосов
/ 16 марта 2011

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

2 голосов
/ 30 января 2009

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

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

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

1 голос
/ 17 декабря 2011 
  <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/

Это похоже на нелогичное поведение.

1 голос
/ 17 декабря 2011

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

    <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>
0 голосов
/ 12 января 2012

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

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

0 голосов
/ 30 января 2009

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

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

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

<div style="background-color: #f00; width: auto;">
  <div style="width: 2000px; height: 100px; "></div>
</div>
0 голосов
/ 30 января 2009

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

0 голосов
/ 30 января 2009

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

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

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

...