3

私は次のことをしたい：

列 A、最大 listitem と同じ幅にする | 列 B は左の桁と同じ幅で、オーバーリープ時に水平スクロールボックスを持ちます。

幅:自動 | 幅: 100%;

list1   | adklajd lkasjdlk ajs kldajlkjd kalsd 
list222 | sdfsf
list33  | sdfsdffds
        | xxx

これを行う方法？それも簡単ではありません。

編集: http://jsfiddle.net/Y3p9F/ と列 B は新しい行に移動しますが、私はそれを望んでいません

4

2 に答える 2

8

floatとの組み合わせを使用して、marginこれを実現できます。

<div id="colA">
    <!-- completely irrelevant mark-up -->
</div>
<div id="colB">
    <p><!-- Completely irrelevant text... --></p>
</div>​

そしてCSS：

div {
    padding: 0.2em 0.5em;
}
#colA {
    float: left;
    margin-bottom: 100%; /* to prevent the #colB text wrapping beneath #colA */
}

#colB {
    clear: right;
}

JS フィドルのデモ。

(Chromium 22/Ubuntu 12.10 でのみテスト済み。)

于 2012-11-18T23:26:21.323 に答える
3

うーん

これに2つの部分

  1. HTML
  2. ファイルのCSS

HTML

<html>
 <div id='col1'> </div>
 <div id='col2'> </div>
</html>

CSS

#col1 {
 float: left;
 width: auto;
}
#col2 {
 float: left;
 clear: right;
 width: 100%;
}

説明 Float は基本的に div をビューポート (または画面) の左側に配置し、clear は 2 番目の列の右側からフローティング項目を削除します。

これを 100% の設定と組み合わせることで、2 つの div が互いに隣り合い、最初の div は必要なだけの幅になり、2 番目の div は最初の列の右側の残りのスペースを埋めます。 .

于 2012-11-18T23:31:01.607 に答える