Рендеринг Div в проблеме Firefox - PullRequest
Новая
       21

Рендеринг Div в проблеме Firefox

0 голосов
/ 04 июня 2009

Я хочу сделать что-то подобное в Firefox 

<div style="float:left"> Row1,Column1 </div>
<div>
  Row 1,Column2 
  <div> Content 1 n Row1,Column2 </div>
  <div> Content 2 in Row1,Column2 </div>
</div>

В IE это работает нормально, но в Firefox происходит то, что Row1, column2 не укладывается один под другим.

[Content2 in Row1, Column2] идет ниже содержимого [Row1, Column1].

Может ли кто-нибудь помочь мне понять это.

Я не хочу использовать таблицы. Не могу их использовать.

Спасибо, Бен

[Обновить] это то, чего я хочу достичь, т.е. после рендеринга div'ов это должно выглядеть следующим образом. 

[Row1,Column1] [Content 1 n Row1,Column2]
               [Content 2 in Row1,Column2]

В IE это работает, но в Firefox это выглядит так 

[Row1,Column1] [Content 1 n Row1,Column2]
               [Content 2 in Row1,Column2 dsfdsf sdfdsf

fsdfdsfdffsf]

Это проблема

Я не могу скопировать CSS здесь, но это то, к чему это приводит в конце

Ответы [ 6 ]

5 голосов
/ 04 июня 2009

То, что вы пытаетесь сделать, не сработает.

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

Если вы хотите ТАБЛИЦЫ данных со столбцами и строками, используйте таблицы. Вот для чего они нужны: . (статья от alistapart, которая должна быть авторитетной для вас, поищите "Вы говорите, что таблицы HTML мертвы?")

1 голос
/ 04 июня 2009 
<div style="width: 100%; overflow: hidden;">
    <div style="float: left;">Row1, Column1</div>
    <div style="float: right;">
        Row1, Column2
        <div>Content 1 in Row1,Column2</div>
        <div>Content 1 in Row1,Column2</div>
    </div>
</div>
0 голосов
/ 04 июня 2009

Проблема и решение http://img190.imageshack.us/img190/7959/whatshappening.png

отсюда и полученный код 

<html>
<head>
</head>
<body>
    <div style="float:left; background: red;">
        Row 1 column 1
    </div>
    <div style="background: blue;margin-left: 200px;">
        <p>Row 1 column 2</p>
        <p>fdsfsfsdfsdfsdfsdfs</p>
    </div>
</body>
</html>
0 голосов
/ 04 июня 2009

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

<div style="float:left"> Row1,Column1 </div>
<div style="float:left;margin-left:100px;">
  Row 1,Column2
  <div> Content 1 n Row1,Column2 </div>
  <div> Content 1 in Row1,Column2 </div>
</div>
0 голосов
/ 04 июня 2009

Так должны работать поплавки, IE делает это неправильно. Самый простой способ исправить это - обернуть все эти элементы внутри другого div, а затем установить высоту элемента с плавающей запятой равным 100%.

Редактировать: исправлено http://jsbin.com/upane

<div>
  <div style="float:left; height:100%">Row1,Column1 </div>
  <div style="float:left">
    Row 1,Column2 
    <div> Content 1 n Row1,Column2 </div>
    <div> Content 1 in Row1,Column2 </div>
  </div>
</div>

Предполагается, что вы хотите что-то вроде этого: 

|--------|-----------|
|        |-----------|
|        |-----------|
0 голосов
/ 04 июня 2009

Вы можете сделать что-то вроде 

<div style="clear:both"> Row1,Column1 </div>
<div>  Row 1,Column2   
    <div> Content 1 n Row1,Column2 </div>  
    <div> Content 1 in Row1,Column2 </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...