web-dev-qa-db-ja.com

CSS：display：inline-blockおよびpositioning：absolute

次のコードを考慮してください。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        .section {
            display: block;
            width: 200px;
            border: 1px dashed blue;
            margin-bottom: 10px;
        }
        .element-left,
        .element-right-a,
        .element-right-b {
            display: inline-block;
            background-color: #ccc;
            vertical-align: top;
        }
        .element-right-a,
        .element-right-b {
            max-width: 100px;
        }
        .element-right-b {
            position: absolute;
            left: 100px;
        }
    </style>
    <title>test</title>
</head>
<body>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-a">some text</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-a">some more text to force line wrapping</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-b">some text</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-b">some more text to force line wrapping</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-b">some more text to force line wrapping</span>
    </div>
</body>
</html>

絶対配置の要素は、必要な高さを含むボックスを「忘れる」ようにしています。

「セクション」ボックス内の絶対配置が必要ですが、これに対する別の解決策はありますか？

事前に感謝します、geronimo

編集

テーブルを使用することは実際にはオプションではなく、2番目の列が常に同じ位置にある「マルチレベル」/「ネスト」レイアウトのようなものが必要です。

 |最初の列のテキスト| 2列目のテキスト
 |インデントされたテキスト| 2列目
 |インデント| 2列目
 |さらにインデント| 
 |折り返します
 |テキスト| ... 
 |何とか| ...

（もちろん「|」はなし）

csscss-position
29
geronimo

position:absolute;を使用すると、要素は通常のページフローから削除されます。したがって、コンテナ要素のレイアウトには影響しません。そのため、コンテナ要素はその高さを考慮しないため、高さを設定するものが他にない場合、コンテナの高さはゼロになります。

さらに、display:inline-block;を設定しても、position:absolute;である要素には意味がありません。繰り返しますが、これは絶対配置がページフローから要素を取り出すためです。これはinline-blockとは相反します。これは、要素がページフローに適合する方法に影響を与えるためにのみ存在します。 position:absolute;であるすべての要素は、display:blockとして自動的に処理されます。これは、絶対位置決めの唯一の論理表示モードだからです。

必要絶対配置の場合、高さの問題に対する唯一の解決策は、コンテナボックスの高さを設定することです。

ただし、絶対位置設定なしで実行できると思われます。

あなたがやろうとしているのは、各ブロックの2番目の<span>をブロックの固定位置に配置して、それらが整列するように見えます。

これは古典的なCSSの問題です。 「古き良き時代」では、Webデザイナーはテーブルを使用してテーブルセルの幅を固定していました。これは明らかに今日のWebデザイナーの答えではありませんが、多くの疑問を引き起こすものです。

CSSを使用してそれを行う方法はいくつかあります。

最も簡単なのは、両方の<span>要素をdisplay:inline-block;に設定し、両方に固定幅を与えることです。

例えば：

<div class='section'>
    <span class="element-left">some text</span>
    <span class="element-right">some text</span>
</div>

次のCSSを使用します。

.section span  {display:inline-block;}
.element-left  {width:200px;}
.element-right {width:150px;}

[編集] 質問の更新後

以下は、あなたが今求めていることをどのように達成するかです。

<div class='section'>
    <span class="element-left"><span class='indent-0'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-1'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-2'>some text</span></span>
    <span class="element-right">some text</span>
</div>

次のCSSを使用します。

.section span  {display:inline-block;}
.element-left  {width:200px;}
.indent-1 {padding:10px;}
.indent-2 {padding:20px;}
.element-right {width:150px;}

少量の余分なマークアップですが、目的の効果が得られます。

52
Spudley

実際、これはdivを使用して簡単かつ簡単に実行できます。インラインまたはブロック表示div内にposition：relativeのdivを配置するだけです。幅と高さを、それを含むdivと同じに設定します。その後、別のdivをその中に絶対に配置できることがわかります。

2
Twmprys

いや.

visible: noneを使用してセクションボックス内に要素のコピーを絶対に配置できますが、定義による絶対配置は、それより上の要素と相互作用しない「浮動」要素になります。

ページのレイアウトが固定されていると仮定すると、padding-left: #px;を使用して目標を達成することができます。相対的な配置はあなたが望むものではないと思います。

または、display: table-*を使用して、ドキュメント構造に影響を与えることなく、より厳密なフォームを保持するように強制することもできます here

ただし、セルを流動的にするかどうかに応じて、事前に決められた幅の設定が気に入らず、個別の.sectionを整列させる場合は、.section divをdisplay: table-rowに変更する必要があります。

2
J V