0

だから私はただ楽しみのために小さなサイトを作っています - そして HTML をもう少しよく学ぶために。

私は4つのdivを持っています。コラージュのようにアレンジしたいです。私はそれらのうちの3つを完璧な位置に持っていますが、CSSでdisplay:noneで他の3つを非表示にしない限り、4つ目はまったく表示されません...

なぜこれが起こるのか知っている人はいますか？UbuntuでChromiumを使用しています。

<body>
  <center>
    <div id="content1">

    </div>
    <div id="content2">

    </div>
    <div id="content3">

    </div>
    <div id="cont4">
    THIS ONE DOESN'T SHOW UP.
    </div>
  </center>
</body>

CSSは次のとおりです。

#content1{
    width:230px;
    height: 160px;
    background-color:blue;
    border-radius:10px;
    position: relative;
    left: -240px;
}
#content2{
    width:230px;
    height: 350px;
    background-color:red;   
    margin-top: 10px;
    border-radius:10px;
    position: relative;
    left: -240px;
}
#content3{
    width:230px;
    height: 520px;
    background-color:red;   
    border-radius:10px;
    position: relative;
    top: -520px;
}
#cont4{
    width:230px;
    height: 350px;
    background-color:purple;    
    position: relative;
    left: 240px;
}
4

3 に答える 3

1

Chrome と Firefox で見たところ、cont4 は表示されていますが、ページのかなり下にあります (表示するにはスクロールする必要があります)。正確な位置はわかりませんが、top: -1040px を追加すると、残りの div と共にページの上部に配置されます。

#cont4{
    width:230px;
    height: 350px;
    background-color:purple;    
    position: relative;
    left: 240px;
    top: -1040px;
}
于 2012-09-09T16:21:56.830 に答える
0

#cont4を与えるtop: -1040px;。これは、前のdivで、トップを適用して-520pxトップに揃えたことを意味します。したがって、紫色のdivを表示するには、 this lengh+ height of that div（520 + 520 = 1040）が必要です。これがデモです。

しかし、これは私の解決策ではありません。3番目のdivmargin-top: -520px;の代わりに使用します。top: -520px;これにより、4番目のdivが3番目のdivとともにシフトされます。しかし、topこれをしないでください。プロパティtopを使用して要素を微調整するためのものです。前の要素との関係で、要素までの外部距離を測定するためのものです。positionmargin-top

また、トップの動作は、位置のタイプ、絶対、相対、または固定によって異なる場合があります。

これが修正されたデモです

于 2012-09-09T16:19:23.930 に答える
0

centerJared Farrish が言ったように、タグは非推奨です。実際、このタイプのレイアウトを取得するには、CSS をより慎重に使用する必要があります。利用可能な例がたくさんあります。「 CSSで段組みレイアウト」で検索してみる。このチュートリアルを確認できます。

また、これは非常に役立つリソースです。このツールは興味深いものです。これも確認できます。

于 2012-09-09T17:09:42.460 に答える