1

私は3列のレイアウトを持っています。

すべての列は div として定義されます。そして、それらはすべて同じ css を実装しています。

.div-column {
    display:inline-block;
    vertical-align: top;
}

列の内容が広すぎない限り、列は予想どおり横に並んでいます。ただし、最後の列には、テキストを含む div が含まれています。このテキストが長すぎると、列全体が改行されます。

<div id=column3 class=div-column>
    <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.    
    </div>
</div>

テキストが 1 行に収まらない場合は、テキストが折り返されることを期待していました。そのテキストの長さが問題にならないようにするにはどうすればよいですか? つまり、3 列のレイアウトが崩れないようにするにはどうすればよいでしょうか。

重要: 列の固定幅 (幅、最小幅、最大幅) を使用してはいけません!!!

（うまくいけばシンプルな）アイデアをありがとう！

4

2 に答える 2

2

私が間違っていなければ、3 つすべてがdivs同じ場所に存在し、下にスクロールしないでください。そのためdisplay:table-cell;には、div-columnクラスに a を追加する必要があります。これが実用的なソリューションです。

HTML:

<div id=column3 class=div-column>
    <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.    
    </div>
</div>

<div class=div-column>
    <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.    
    </div>
</div>

<div class=div-column>
    <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.    
    </div>
</div>

CSS:

.div-column {
    display:table-cell;
    vertical-align: top;

}

お役に立てれば。

于 2013-06-04T09:07:47.550 に答える
0

max-widthはどうですか？それでもdivを小さくすることはできますが、指定された値に達しても大きくなりません。

max-width:250px;

Jsフィドル

于 2013-06-04T09:13:46.113 に答える