1

隣り合わせに表示する必要がある2つのdivがあります。最初のdivには数字だけがあり、もう1つはリンクです。ブラウザ（Firefoxとchrome）のサイズが変更されると、2番目のdivが新しい行に配置され、テキストが折り返されます。2番目のdivのテキストを1番目の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

幅を指定せずに2つのブロック要素をフロートさせようとしています。divはブロック要素です（デフォルト= display：block;）。つまり、幅を指定しない限り、常に幅100％まで伸びます。それぞれの幅である2つの要素をフロートさせようとする場合：100％; 同じ行/行にとどまることができません。（最大200％> 100％）;

于 2013-03-27T13:48:56.657 に答える