10

JSFIDDLE

編集：これの反対を達成しようとしています。
（側面に2つの固定幅divと中央に1つの流体幅divの代わりに、側面に2つの流体幅divと中央に1つの
divを取得しようとしています）

A、B、Cの3つのdivがあります。

BはAとCの中央に座る必要があります。

私は何をする必要がありますか

私が現在行っていることは、上記で起こっていることとほぼ一致しています。ただし、A、B、およびCのコンテナーの幅が奇数の場合、一部のブラウザーはAとCの幅を切り捨て、他のブラウザーは切り上げます（Cをそれぞれ1px長くし、1px短くします）。

Cの右側にある余分なピクセルに注意してください

Cの右側のスペースが1ピクセル薄くなっていることに注意してください。

ネストされたdivがいくつ必要かは関係ありませんが、これに多くの時間を費やしてきました。誰かがすでにこの問題の確実な解決策を持っているなら、共有してください！

注：
-A、B、およびCの親は、オーバーフローを非表示にすることはできません。
-A、B、Cはオーバーラップできません（半透明のpngがあります）

これが私の出発点です：JSFIDDLE

4

5 に答える 5

7

動作する2つの方法を次に示します。どちらも警告があります（警告、どちらもラッパーが必要です）。

HTML

<section class="wrapper">
    <div class="column" id="a"></div>
    <div class="column" id="b"></div>
    <div class="column" id="c"></div>
</section>​​​​​​​​​​​

ベースCSS

.column {
    height: 3em;
}

#a {
 background-color: red;   
}
#b {
 background-color: green;
}
#c {
 background-color: blue;   
}

#b {
  width: 50px;   
}

CSS3アプローチ：

.wrapper {
    display:box;
    box-orient:horizontal;
    box-align:stretch;    
}

#a, #b {
    box-flex:1.0;
}

警告：FirefoxとWebkit（Chrome / Safari）でのみサポートされており、どちらもプレフィックス付きのルールが必要です。以上がいつかはそうなるでしょう。

プレフィックス付きのデモは次のとおりです：http：//jsfiddle.net/crazytonyi/cBVTE/

テーブル表示アプローチ

.wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;

}    
.column {
    display: table-cell;
}

警告：IEは、7または8までこの表示タイプのサポートを開始しませんでした。一方、古いバージョンのIEのユーザーを心配することは、CookieとJavaScriptをオフにしているユーザーを心配することと同じです。彼らは追いつくか、ページの破損に慣れます。パンダリングを終了します！

上記を使用したデモは次のとおりです。http： //jsfiddle.net/crazytonyi/kM46h/

どちらの場合も、フロートやポジショニングは必要ありません。古いブラウザに中指を与えるだけです。何歳かは、選択した方法によって異なります。

于 2012-05-15T07:16:15.673 に答える
0 
<style>

.a{ width:50%; height:25px; background-color:#0F0; float:left }
.b{ width:13px; height:25px; background-color:#FFF; float:left;
    position:relative; left:51%;}
.c{ width:50%; height:25px; background-color:#C33; float:right; }

</style>
于 2012-05-15T06:14:25.837 に答える
0

編集：アンソニーのソリューションを使用してください！それはひどくハッキーなCSSなしですべての要件を満たします！古いブラウザをサポートする必要がある場合は、私のソリューションを自由に使用してください（ただし、ほとんどの場合、Anthonyのソリューションは最適です）。

この解決策をまだ試したことがないのかわかりませんが、これはこの質問で受け入れられた回答よりもうまく機能しているようです。丸めなし！

解決しました！

丸められた50％を値（X）、Bの一定幅を値Yと考えると、次のことが必要になります。

Aの幅= XC の幅=100％-X

私はこれを私の構造として使用することにしました：

<container>
  <a></a>
  <b></b>
  <c_holder>
    <c>
    </c>
  </c_holder>
</container>

Q. Cの幅をcontainer_width -- Xにするにはどうすればよいですか？
A. Cに幅100％のc_holderというコンテナを与え、CにXの左オフセット（50％）を与えます。

今のところBを忘れて...

これで、2つのdivが隣り合っています...それぞれが約50％ですが、合計すると正確に100％になります。

これらすべてをコンテナに入れ、このコンテナにY（B divの幅）の右マージンを与えます。これで、AとCが隣り合っていますが、幅の100％ -Yを占めています。

c_holderにYの左オフセットを与え、Aとc_holderの間にBをドロップします。AとBに左フロートを適用します。

ここで、Aの幅はX、Bの幅はY、Cの左オフセットの合計はX + Y、Cの表示幅はコンテナの100％-X - Yです。

ちょっとファンキーですが、IE7、Chrome、Safariでは完全に機能します。FFは後でテストします。

于 2012-05-15T02:43:43.003 に答える
0

私はあなたがこのように使わなければならないと思います。

HTML

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

CSS

.a
{
width:50%;
height:25px;
background-color:#0F0;
float:left  
}
.b
{
width:13px;
height:25px;
background-color:#FFF;
margin-left:-6px;
float:left; 
position:relative;
z-index:99;
}
.c
{
width:50%;
height:25px;
background-color:#C33;
margin-left:-7px;
float:left; 
}
</style>
于 2012-05-15T04:37:48.103 に答える
0

dabblet.comのデモ：

http://img838.imageshack.us/img838/6116/cff430b799254087b6ec991.png

html：

<div id="main">
    <div class="half left">
        <div>
            <div id="a" class="col"> </div>
         </div>
    </div>
    <div class="half right">
        <div>
            <div id="c" class="col"> </div>
         </div>
    </div>
    <div id="b" class="col"> </div>
</div>

css：

#main {
    height: 40px;
    width: auto;
    border: 1px solid #cfcfcf;
    position: relative;
}

.half {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
}

.half.left { left: 0; }
.half.right { right: 0; }

.half > div {
    height: 100%;
    padding:0 8px;
}

.half.left > div { padding-left: 7px; }
.half.right > div { padding-right: 7px; }

.col {
    height: 100%;
    margin-top: 3px;
}

#a,
#c {
    background-color: green;
}

#b {
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    width: 14px;
}

更新：重複なしで更新

于 2012-05-15T07:38:27.343 に答える