1

私はウェブページに取り組んでおり、div タグの幅を設定しており、margin: 0 auto; を使用しています。しかし、私のコンテンツはまだ左側にあります。OS X 10.7.3、Chrome 19.0.1084.46、および Dreamweaver CS6 を使用しています

ここに私のCSSがあります:

@charset "UTF-8";
body {
    text-align: center;

    display: block;
}
.container {
    float: left;
    height: 2000px;
    width: 964px;
    margin: 0 auto;
    text-align: left;
}
.header {
    float: left;
    height: 117px;
    width: 964px;
}
.leftcol {
    float: left;
    height: 1715px;
    width: 534px;
    margin-top: 20px;
margin-right: 10.125px;
    margin-bottom: 20px;
    margin-left: 30px;
}    
.navbar {
    float: left;
    height: 69px;
    width: 964px;
}
.rightcol {
    float: left;
    height: 1715px;
width: 306px;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 20.25px;
}
.video {
    float: left;
    height: 301px;
    width: 534px;
}
.pagebody {
    float: left;
    height: 1749px;
    width: 920px;
    background-color: #FFF;
    margin-top: 0px;
    margin-bottom: 21.25px;
    margin-left: 22px;
}

そして、CSS を使用する HTML:

<body>
<div class="container">
  <div class="header"><img src="Images/Top.png" width="964" height="117" alt="Intelligentlemen Films" /></div>
  <div class="navbar"><img src="Images/RibbonMenu.png" width="964" height="69" alt="Navbar" /></div>
  <div class="pagebody">
    <div class="leftcol">
        <div class="video"><iframe width="534" height="301" src="http://www.youtube.com/embed/kMBEuol6aUc" frameborder="0" allowfullscreen></iframe></div>
     </div>
     <div class="rightcol"><img src="Images/intelligentlemen button.jpg" width="300" height="61" alt="Intelligentlemen" /></div>
    </div>
   </div>
 </body>
</html>
4

2 に答える 2

4

あなたも応募したからですfloat: left;。

また、 などの doctype 宣言でソースを開始し、HTML とCSSが有効であること<!doctype html>を確認する必要があります。

于 2012-05-20T05:29:34.560 に答える
4

まず、float left と margin auto horizo​​ntal はできません。とにかくポイントは何ですか。コンテナを左側に押し込むのではなく、中央に配置する必要があります。これはおそらく、あなたが望むように物事がうまくいかないため、そこにある他のすべての要素が左に浮かんでいるため、おそらく問題を引き起こします.

ヘッダーやナビゲーション バーなどの要素は、フロートするべきではありません。フロートしなくてもまったく問題ありません。クリアする必要があります。あなたはするためにいくつかの読書が必要です.

結論。浮かんでいるときは、フロートを使い終わったら、フロートをクリアする必要があります。

これがあなたの読み物です: それが唯一のことである場合は、少なくともThe Great Collapse on CSS Tricks を読んでください。

http://css-tricks.com/all-about-floats/
http://www.alistapart.com/articles/css-floats-101/
http://www.positioniseeverything.net/easyclearing.html

フロートを理解することは非常に重要です。

psコンテナの高さを定義しないでください。柔軟にしたいのですか？CSS フロートを完全に理解していないため、高さを定義していることはわかっています。だからこそ、あなたは読書をする必要があります:)

幸運を ：）

于 2012-05-20T05:43:56.300 に答える