2

ウェブサイトを作ろうとしていますが、css で行き詰っています。動画のスライドショーとサイドバーの間になぜか隙間ができてしまいます。これがなぜなのか誰か教えてもらえますか？以下は、コードを指定したときに Web ブラウザーに表示される画像です。 私のコードの例

<html>
<head>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id='header'>
        <p>Header</p>
    </div>
    <div id='picture_gallery'>
        <p>Picture Gallery</p>
    </div>
    <div id='nav_bar'>
        <p>Nav Bar</p>
    </div>
    <div id='vision_statement'>
        <p>Vision Statement</p>
    </div>
    <div id='video_slideshow'>
        <p>Video Slideshow</p>
    </div>
    <div id='sidebar'>
        <p>Side Bar</p>
    </div>
    <div id='footer'>
        <p>Footer</p>
    </div>
</body>


#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}

#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}

#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}

#vision_statement {
border: 1px solid black;
display: inline-block;
float: left;
height: 50px;
width: 33%;
text-align: center;
}

#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;
width: 33%;
text-align: center;
}

#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 33%;
text-align: center;
}

#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
4

3 に答える 3

3

css定義の一部を変更しますbox-sizing:border-box;

このように 

        #sidebar, #vision_statement, #video_slideshow{
-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
        box-sizing:border-box;
    }


#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}

#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}

#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}

#vision_statement {
border: 1px solid black;
display: inline-block;
float: left;   // add this float:left
height: 50px;
width: 33%;
text-align: center;
}

#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;float: left;  // add float:left
width: 33%;
text-align: center;
}

#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 34%;   // add width :34%
text-align: center;
}

#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
    clear:both;   // add this clear both;
}

デモ

于 2013-07-22T08:13:17.727 に答える
0

現在は正常に動作していposition:absoluteます.. をサイドバーのスタイルに設定するだけです..

css の更新されたコードは次のとおりです。

#sidebar {
border: 1px solid black;
display: inline-block;
position:absolute;
height: 50px;
width: 32%;
text-align: center;
}

デモ

于 2013-07-22T08:14:10.993 に答える
0

要素の幅を 33.3333% またはそれに類似する値に設定する必要があります。それぞれに 33% を指定すると 1% のギャップが生じるからです。

その幅に収まらないという問題は、設定した 1px の境界線が原因です。従来のボックス モデルでは、33.33% の幅に境界線が含まれていないため、実際の幅は 33.33% + 1px になります。

これを修正するには、border-box ボックス モデルを使用できます。私はいつもそれを使用しています-はるかにうまく機能します。

その理由と機能については、こちらをご覧ください。

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

追加するだけです：

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

あなたのcssファイルに。次に、3 つの要素の幅を次のように変更します。

width:33.33%;

これにより、すべてのボックスがまったく同じ幅になり、すべてが同じ行に収まります。

于 2013-07-22T08:21:09.313 に答える