1

我有 2 个 div 需要彼此相邻显示。第一个 div 只有一个数字，另一个是链接。当浏览器（Firefox 和 chrome）调整大小时，它会将第二个 div 放在新行上，然后换行。我希望第二个 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 中得到的，但这不是我想要的 在此处输入图像描述

这就是我在 IE 中得到的，这就是我想要的。 在此处输入图像描述

4

2 回答 2

1

您可以通过使用display:table-cell而不是浮点数来实现这一点：

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

在这里看小提琴。

于 2013-03-27T13:45:29.683 回答
0

You're trying to float two block elements without giving them widths. A div is a block element (default = display: block;). That means that it will always stretch to width: 100% unless you specify its width. When trying to float two elements that are each width: 100%; they can't remain on the same line/row. (200% > 100% max);

于 2013-03-27T13:48:56.657 回答