8

right-sibling以下では、が本当にcontainerdivの中央に配置されるように CSS を変更したいと思います。（編集：絶対配置を使用せずに）。

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
      }
      #right-sibling {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>

現在の実装では、右兄弟のセンタリングは左兄弟の影響を受けます。これはdisplay: none、left-siblingのスタイルに追加することで確認できます。

(注: HTML 構造の変更は避けたいと思います。私が理解しているように、CSS の全体的なポイントは、タグ構造をプレゼンテーション ロジックから分離することであり、これは CSS に対する本当にクレイジーな要求のようには思えません。扱う。）

ティア。

4

5 に答える 5

6

これを機能させるために使用したトリックは、コンテナの左側にパディングを配置することです。このスペースに等しいが負のマージンを与えることで、左の兄弟がこのスペース内に座るように促すことができます。

写真を完成させるために、コンテナの右側にも、左側の兄弟の幅と同じサイズのパディングを配置します。

<html>
  <head>
      <style type='text/css'>      
        #container {
            width: 500px;
            padding-left:50px;
            padding-right:50px;     
            }      
        #left-sibling {
            border: solid 1px #000;
            float: left;
            width:50px;
            margin-left:-50px;  
        }      
        #right-sibling {
            border: solid 1px #000;
            text-align: center;

        }
        #container2 {
            width: 500px;   
            }  
</style>
  </head>
    <body>
        <div id='container'>      
            <div id='left-sibling'>Spam</div>
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container'> 
            <div id='left-sibling' style="display:none;">Spam</div>    
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container2'> 
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
      </body>
</html>
于 2008-12-05T11:38:27.800 に答える
2

幅を左の兄弟に設定し、同じパディングを右に設定してみてください：右の兄弟に

そのようです

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
        width:50px;
      }
      #right-sibling {
        text-align: center;
        padding-right:50px;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>
于 2008-12-05T09:59:26.020 に答える
1

float: left;オン#left-siblingを に変更できますposition: absolute;。これにより、通常のフローから外れるため、右の兄弟には影響しなくなります。

もちろん、これは設計に他の副作用をもたらす可能性があります。

于 2008-12-05T09:20:14.617 に答える
1

フローティング要素には常に幅を設定する必要があります。そうしないと、おかしくなります:)

あなたが置く場合

border: solid 1px #000;

両方の div でルールを適用すると、何が起こっているかがわかります。#right-sibling div が親 div (#container) の幅全体を埋めているため、テキストは実際には中央に配置されていますが、そうではないように見えます!

于 2008-12-05T09:27:07.067 に答える
1

text-align 属性は、属性が適用されるコンテナー内のコンテンツの配置を制御します。次のスタイルを追加すると、見やすくなります。

#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

quirksmode を回避するためにドキュメントに Doctype を追加することをお勧めします

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

および次のスタイル:

#container { width: 500px; position:relative; border:1px Solid Black; }
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; }
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

もちろん、ニーズに合わせて兄弟のサイズを調整する必要があります。境界線は、実際に何が起こっているかを示す良い仕事をしています。

于 2008-12-05T09:38:36.920 に答える