Как да увеличите 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>

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 Надявам се да е просто шега. Мразя не-XML-сериализиран HTML. Лично мнение... :-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
Въпреки че аз лично не мисля, че плаващото е единственото решение тук, това работи най-добре във всички браузъри, а table-cell не. Гласът против е премахнат. =) - person Brian Kim; 30.01.2009

arrow_upward
2
arrow_downward

Div, в който се съдържа, е по-малък от 2000px. Трябва да направите нещо подобно:

  <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; казва на елемента да расте толкова (или толкова малко), колкото е необходимо.

Fiddle: 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. (реф: crescentfresh) Знам за сигурни, че table-cell не работи за 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