1

見出しには次の HTML があります。.leftとは空の.rightスパンです。.left には特定の幅がありますが、.text幅は常に同じではありません。.left (固定幅) と . の背景を設定したい.right。は.right、親要素 (h1) の残りのスペースをすべて取得する必要があります。それはどのように行うことができますか？

<h1>
    <span class="left"></span>
    <span class="text">Text</span>
    <span class="right"></span>
</h1>

動作しない次の CSS を試しています。

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;   
}

JSFiddle リンクは次のとおりです: http://jsfiddle.net/jMR8u/

ここに私が取得しようとしているものがあります:ここに画像の説明を入力

アイデアは、.textスパンを除いてh1に背景画像を設定することです。問題は、.textの背景を設定できないことです。そうしないと、簡単になります。

4

5 に答える 5

2

このバージョンは、コンテンツに合わせて伸縮し、.textクロスブラウザーである必要があります。

青（右）の背景を次の境界線にすることで偽造できます.text。

.text { border-right: 1000px solid; }

次に、.right左に 1000px シフトします。

.right { margin-left: -1000px; }

に幅を与え、.left各要素inline-blockを にし、右側の余分な青い境界線を非表示にし、新しい行に折り返さないよう.textにします:.right

.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }

そして色をつけてください！

body { background: green; }
.left { background: red; }
.text { border-color: blue; }

JSFiddleデモンストレーションは次のとおりです。

JSFiddle のスクリーンショット

于 2012-12-05T22:39:55.687 に答える
1

幅を .text スパンと h1 要素に設定できる場合。

body{
background:green;
}

h1{
    border: 1px solid red;
    display:table;
    width:100%;
}

.left{
    background: yellow;
    width: 30px;
    display: table-cell;
}

.right{
    display: table-cell;
    background: blue;
}
.text {
    display:table-cell;
    width: 150px;   
}
于 2012-12-05T22:24:27.070 に答える
1

私があなたのイメージを正しいと解釈した場合..これが答えですhttp://jsfiddle.net/jMR8u/4/

h1{
    border: 1px solid red;
    position: relative; 
}

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;
    position: absolute; 
    z-index: 99;
    height: 20px;
    width: 100%;
}
​.text {
    height: 20px;
    width: 150px;
    display: inline-block;
    position: relative;
    z-index; 101;
}​

わかりました、それからレイヤーを使用してください.. z-indexとポジショニングで

于 2012-12-05T21:47:55.740 に答える
1

flexbox を使用できます (ただし、新しい構文を使用します)。残念ながら、今のところChrome と Operaでしか動作しないため、有用性は限られています。

h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }

JSFiddle のデモは次のとおりです: http://jsfiddle.net/FN7vQ/

于 2012-12-05T21:51:11.270 に答える