0

いくつかのコースワークのために Web サイトを構築しようとしていますが、何らかの理由で中央の 2 つの列が左側に押し出されています。ヘッダー、ナビゲーション バー、フッターはすべて垂直方向に整列しますが、中央の 2 つのフローティング div は強制的に左に寄せられています。

http://i.stack.imgur.com/nJ0UB.jpg

HTML

<html>
<head>
    <title>Churches Of Norwich</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="site.css"> 
</head>

<body>
     <div id="bg"> 
        <div id="content">
            <div id="headboxspacer"></div>
            <div id="head-box">Churches of Norwich</div>
            <div id="navbar" style="float: none">
                <div id="tabs">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="map.html">Map</a></li>
                        <li><a href="churches.html">Churches</a></li>
                        <li><a href="comments.html">Comments</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                    </ul>
                </div>
            </div>
            <div id="container" style="overflow:hidden;width: 100%">
                <div id="homeboxleft" style="clear: both">Testing</div>
                <div id="homeboxright" style="clear: both" >Right</div>
            </div>
            <div id="footer"> footer </div>
            <div id="bottomspacer"></div>
        </div>
    </div>
</body>
</html>

CSS

#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}

#headboxspacer{
height:50px;
width:100%;
}

#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}

#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;

font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
} 

#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}

#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}

#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
} 

#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}

#container{
width: 1200px;
}

#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;

float: right;

margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);

text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;    
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#mainbox{

background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6; 
}

#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}

#bottomspacer{
height:100px;
width:100%;
}
4

4 に答える 4

1

ナビゲーションバーのパディングがナビゲーションバーの幅に追加されるためです。

内部divhttp ://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-boxでボックスモデルソリューションを使用する必要があります

そうすれば、すべてのブラウザで同じ幅と外観になります

于 2012-12-09T13:32:25.937 に答える
1

スクリーンショットも添付しました。

これはフィドルの全画面プレビューです。

http://fiddle.jshell.net/zHBhs/2/show/

あなたの問題はインラインCSSだと思います：

<div id="homeboxleft">Testing</div>
<div id="homeboxright">Right</div>
//-------------------^-------------just removed the clear:both inline css here

そして、このcssクラスでmarginプロパティを削除しました:

#homeboxright{
    background-color: #FEE7BE;
    height: 500px;
    width: 50%;
    float: left;
    margin: 0; //  <------------------made margin for all sides to 0
    text-orientation: inherit;
    font-family: sans-serif;
    font-size: 10pt;
    color: #003651;
    font-style: normal;
    text-align: center;
}

これを試して、これが解決するかどうかを確認してください。ここでフィドルをチェックしてください: http://jsfiddle.net/zHBhs/2/

これらの css クラスにもいくつかの作業を行います。

#head-box{
    padding:0;    // change paddings to 0
    margin: 5px 0; // just apply to top and bottom margins
}

#navbar{
    margin: 0;      // change paddings to 0
    padding:10px 0; // just apply to top and bottom margins
}

#footer{
   margin: 0;      // change paddings to 0
   padding:10px 0; // just apply to top and bottom margins
}

ここに画像の説明を入力

于 2012-12-09T13:52:57.393 に答える
0

2つの列を保持する「コンテナ」は「幅=100％」に設定されます。これは、divがページの幅全体に広がることを意味します。

このwidth属性を削除してみてください。その横で、すべてのfloat属性を削除してください。

于 2012-12-09T13:34:49.650 に答える
0

メイン div で左右の両側を取得します。次に、この css を適用します。

#maindiv{
overflow:hidden;
border-bottom:1px solid rgba(200,200,200,0.3);
border-top:1px solid rgba(200,200,200,0.3);
}
#left{
width:60%;
float:left;
overflow:hidden;
}
#right{
overflow:hidden;
}

注: 右の div は左の div に接続されます. 右にフロートさせたい場合は, float:right; を適用します. それに。ただし、左にのみフロートすることをお勧めします:)

上記のトリックを使用した両側の例。

于 2013-03-06T18:59:01.387 に答える