タグ

layoutに関するdgdgのブックマーク (2)

  • CSSのレイアウトテクニック - Faux Absolute Positioning

    CSSのレイアウトテクニック - Faux Absolute Positioning ネタ元:CSSレイアウトテクニック"偽装絶対指定" 久々にCSSでの面白いテクニックですね。 Faux Absolute Positioningについて細かい説明は原文の解説にまかせるとして、かいつまんで説明すると、float方向のネガティブマージンとposition:relativeのleft(right):100%を利用して擬似的に自由配置するというもの。 これを利用するとfloatのみでは再現不可能だったレイアウトが可能になります。 例えば、メインカラムを先に記述して、後にサイド部分を記述するというマークアップの3カラムのリキッドレイアウト。 リキッドレイアウトの為、メインカラムを100%にして、サイド部分にfloatで入り込める領域を作成しなくてはいけないのですが、floatとマージンによる制御だ

    CSSのレイアウトテクニック - Faux Absolute Positioning
    dgdg
    dgdg 2008/06/25
    機会があれば試そう
  • Ultimate multi-column liquid layouts (em and pixel widths)

    8 Feb 2022 — Updated 20 Mar 2023 Table of contents CSS Grid: Static 3 column Responsive 3 column Flexbox: Static 3 column Responsive 3 column Main content with left & right sidebars Padded boxes with headings Product feature comparison table Responsive Attributes: Static 3 column Responsive 3 column Responsive Columns: Static 3 column Responsive 3 column In this article, we'll explore various type

    Ultimate multi-column liquid layouts (em and pixel widths)
  • 1