私はCssを初めて使用しています。私はHTMLページを持っています。事業部の混乱混乱
<body>
<div id="viewer">
<div id="flow">
<img src="images/beatles.jpg">
<img src="images/blink.jpg">
<img src="images/doves.jpg">
<img src="images/flash.jpg">
<img src="images/floyd.jpg">
<img src="images/jurassic.jpg">
<img src="images/naked.jpg">
<img src="images/prodigy.jpg">
<img src="images/xx.jpg">
<img src="images/zabiela.jpg">
</div> <!--end of <div id="flow"> -->
<ul>
<li id="left">
<a href="#" title="Move Left">Left</a>
</li>
<li id="right">
<a href="#" title="Move Right">Right</a>
</li>
</ul>
</div> <!--end of <div id="viewer"> -->
</body>
各画像は200x200です。今私はそれのCSSと混同しています。ここで私はそれを段階的に示します
#viewer {
width:700px;
height:220px;
padding:100px 0 30px;
margin:auto;
border:1px solid #000;
position:relative;
}
メインディビジョンの幅と高さを定義します。パディングを定義すると、div内に配置されている各要素が上から200px、divの下から左右に30pxのスペースがないことを意味します。また私はここでポジションの相対的な定義を要求したいと思います。それはボディやhtmlに関して相対的ですか？ #flow divの幅と高さを定義しませんでした。それで、それはパディングによって計算されました。 #flow divの幅は#viewerの幅と同じですが、#viewer divの上から30px下に配置します。高さは190px、下から30px上に配置します。私が間違っている場合は教えてください。
#flow:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ここでは、#flow divの後に入力するコンテンツを定義しています。私たちは可視性を隠して、それがそこにあることを意味し、スペースを占めるが表示しないことを意味する。それは...ですか？私がここで尋ねたいのは、これは、クリアを使用しています：両方ともです。私たちはここで何を清算していますか？私たちは#viewer divにfloatプロパティを設定しませんでしたか？
今紛らわしい部分が
#flow img {
display:block;
margin-left:-165px;
position:relative;
top:-15px;
left:245px;
float:left;
background-color:#fff;
}
は、今、私たちは#flow本部内にある画像を、設定されています。最初に私が気付くのは、それが1pxのトッププロパティを設定すると混乱していることです。次に、＃flow divに対して整列します。相対位置であり、#flow divの内側にあるので、＃flow divを基準にして整列しているのでうまくいきます。 しかし、私はそれを1pxにプロパティを残して変更します。それから、両方のdivs（#viewerと#flow）を超えます。 divの左端の角と左の中央の間のどこかに配置します。なぜそれが起こっている。位置が相対的な場合は、＃flow div内に残ります。これは私の混乱です。 div内に収まるように画像も縮小されています。私はそれがdovのサイズのためだと思う。各画像は200x200です。私たちの#flowの幅は700pxです。
もう1つ設定します余白が残っています：-165px;。現在、画像は水平に配置され、divに収まるように縮小されます。しかし、もし私がmargin-left：165pxに変わると、。次に、画像が垂直方向に拡大され、すべての画像が表示されます。画像は縮小されません。また、我々はをトップに設定しました：-15px;。値を負の値に設定するのはいつですか？ これは課題や宿題ではありません。私は練習中で、私は物事がどのように働いているか知りたい。ここでは、CSSがどのように機能するかを調べるため
#viewer li {
list-style-type:none;
position:absolute;
bottom:10px;
}
#left {
left:20px;
}
#right {
right:20px;
}
おかげ
あなたは問題が何であるか教えてください：http://jsfiddle.net/tXcg9/ – jao