Question

我想在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不会堆叠在另一个之下。

[Row1，Column2中的Content2]低于内容[Row1，Column1]。

有人可以帮我解决这个问题。

我不想使用Tables。不能使用它们。

谢谢，本

[更新]这是我想要实现的，即在渲染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，但这最终归结为

Answer 1

你要做的事情是行不通的。

如果您根本无法使用表格元素，那么您将需要使用“单元格”的修复高度和宽度，或者您的Web应用程序中的行和列将永远不会排列。

If you want TABULAR data with columns and rows, use tables. That's what they are for。（来自alistapart的文章应该对您具有权威性，请搜索“您是说HTML表已经死了？”）

Answer 2

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

Answer 3

您可以渲染类似

的内容

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

Answer 4

这是浮动应该工作的方式，IE做错了。修复它的最简单方法是将所有这些元素包装在另一个div中，然后将'floated'元素的高度设置为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>

这假设您想要的是这样的：

|--------|-----------|
|        |-----------|
|        |-----------|

Answer 5

向左浮动你的第二列并给它左边距。

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

Answer 6

The problem and the solution 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>

在Firefox问题中渲染Div

6 个答案: