0

何かを機能させようとしている間、私は現在気が狂っています。

私は楽しみと遊び心で小さなウェブサイトを作成しましたが、非常に悩まされていることが 1 つあります。

これは私が思いついたHTMLです：

<div id="container">
 <div id="header">
  <div id="cover-cloud">
   <div id="cloud" class="cloud stage"></div>
   <div id="cloud2" class="cloud2 stage"></div>
   <div id="cloud3" class="cloud3 stage"></div>
   <div id="cloud4" class="cloud4 stage"></div>
   <div id="heading"><h1>Website</h1></div>
  </div>
 </div>
 <div id="nav">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About Me</a></li>
   <li><a href="#">Links</a></li>
   <li><a href="#">Imprint</a></li>
   <li><a href="#">Contac</a></li>
  </ul>
 </div>
 <div id="lang">
  <ul>
   <li><a href="?lang=de"><img src="images/lang/de.gif" alt="DE"></a></li>
   <li><a href="?lang=en"><img src="images/lang/en.gif" alt="EN"></a></li>
  </ul>
 </div>
 <div id="content" class="clearfix">
  <div id="maincontent">
   <div class="contentblock">
    <h3>Home</h3>
     <p>Some welcome text or maybe news, who knows :)</p>
   </div>
  </div>
 </div>
 <div id="footer">Some footer content</div>
 <div id="valid">
  <ul>
   <li>Here comes the HTML validation thingy</li>
   <li>Here comes the CSS validation thingy</li>
  </ul>
 </div>
</div>
<div id="social">
 <div id="facebook"><img src="images/icons/facebook.png" alt="Facebook"></div>
 <div id="twitter"><img src="images/icons/twitter.png" alt="Twitter"></div>
 <div id="youtube"><img src="images/icons/youtube.png" alt="YouTube"></div>
</div>

ここで、コンテナー DIV の右側にソーシャル DIV を配置したいと考えています。私の理解では、ソーシャル DIV は現在、画面の左側からではなく、コンテナー DIV から測定値を取得していますか? しかし、私の理解は完全に間違っていたようです:(

これは両方の DIV コンテナーの CSS です: (メイン ページでのみ機能しますが、リンクをクリックすると、ソーシャル DIV が再び左下にジャンプします)

#container { width: 800px; margin: 25px auto 5px; background-color: #FFFFFF; border: 1px solid #000; border-radius: 5px; position: relative; }

#social { margin: -154px 0 0; overflow: hidden; width: 45px; }

ここでいくつかの回答の例もいくつか試しましたが、正しい結果が表示されていません。私は何を間違っていますか？

4

1 に答える 1

0

ブロック要素 (div など) は親要素の with を取り、常に改行で始まります。ブロック要素に幅を与えるだけでは十分ではありません。同じ行にとどまるように指示する必要があります。フローティングすることでそれを行うことができます：

#social {
    float: left;
}

または、両方の div をインライン ブロック要素にすることもできます。

#container {
    display: inline-block;
}

#social {
    display: inline-block;
}

これら 2 つのアプローチにはそれぞれ異なる欠点がありますが、それは別の話です。

于 2013-08-14T12:15:13.023 に答える