Question

我有2个div需要彼此相邻显示。第一个div只有一个数字，另一个是链接。当调整浏览器（Firefox和chrome）的大小时，它将第二个div放在一个新行上然后包装文本。我希望第二个div的文本与第一个内联包装。

这是我的代码

<html>
    <body>
        <style>

           .row {    
                    border: 1px solid yellow;
                    width: 100%;
                    overflow: auto; 
                }

          .cell {
                    float:left;    
                    border: 1px solid red;  
                }

        </style>

<div class="row">
    <div class="cell"><span>1</span></div>
    <div class="cell">
        <a>This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.</a>
    </div>
</div>

</body>
</html>

这是我在Firefox中得到的，但这不是我想要的 enter image description here

这就是我在IE中得到的，这就是我想要的。 enter image description here

Answer 1

您可以使用display:table-cell代替浮点数来实现此目的：

.row {
    border: 1px solid yellow;
    display:table-row;
}
.cell {
    display:table-cell;
    border: 1px solid red;
}

请参阅小提琴here。

Answer 2

你试图浮动两个块元素而不给它们宽度。 div是块元素（默认= display：block;）。这意味着它将始终拉伸到宽度：100％，除非您指定其宽度。当试图浮动每个宽度的两个元素：100％;它们不能保持在同一行/行上。（200％> 100％最大值）;

如何在浮动div中获取内容以包装浏览器调整大小但不包括换行符

2 个答案: