1

長さが異なる 3 つのテキスト列があり、各列の下部にボタンを配置したいと考えています。列が横に並んでいる（フローティングされている）ときにページ内の同じ垂直位置にボタンが配置され、その後に配置されるようにボタンを配置する現在の方法（できればCSSのみ）を探していますレイアウトが 1 列の場合 (小さな画面の場合)、関連する列。解決策の一部でない限り、背景がないため、必ずしも列を同じ長さにする必要はありません。

これは、関連するセクションのコード/説明です。

<div 1 - position:relative>
   <div 2 - display:block;overflow:hidden>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image1.jpg" />
            <h1>Title 1</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image2.jpg" />
            <h1>Title 2</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image3.jpg" />
            <h1>Title 3</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
   </div 2>
</div 1>

コードと配置で多くのバリエーションを試しましたが、機能させることができませんでした。私もいくつかの解決策を見つけましたが、それらは古い (IE 5 に戻った) か、関連性があるかどうかわかりませんでした。

列の div の後に別の div に配置すると、全画面では見栄えがよくなりますが、小さな画面ではすべてのボタンが最後の列の後に配置されます。列の先頭または末尾に配置すると、各列のテキストの長さに基づいて垂直方向に配置されます。

position:absolute;bottom:0 を試して div 2 の下部に配置しましたが、結果は良くありませんでした。どんなアイデア/解決策も大歓迎です。

4

2 に答える 2

0

実際には、テーブルはより広い画面でのみ機能します。テキストセクションの間にボタンがある単一の列にテキストが流れ込まないことを確認してください。display: と screen width メディア クエリを使用して、2 セットのボタンを交互に表示/非表示にしました。2 つのバージョンを作成し、メディア クエリを使用して画面幅に基づいて表示/非表示にすることもできたと思います。jsfiddle.net/DTMgJ/5/ の jsfiddle も、メディア クエリと大きな負のマージンを使用して解決します。

于 2013-10-12T21:04:18.080 に答える