0

私のプロジェクト Web サイトでは、3 列のレイアウトを行っています。ここで受けた支援により、かなり遠くまで到達することができました。

これは私のウェブサイトです:

http://younani.com/finalsite/aboutus.html

提供された写真に似た 3 列のレイアウトを作成しようとしていますが、問題は左、右、および中央の列です。ご覧のとおり、左の列に背景色を配置すると、中央と右の間にギャップが生じますが、左も同様です。

それは本当に専門的ではなく、きれいではないように見えます.なぜそれらがすべての列の間にギャップがあるのか​​ 、なぜそれらを均等に一致させることができないのかわかりません. ヘッダーも同様です。理由はありますか？

ここに画像の説明を入力

以下は私のCSSです：

#header {text-align: center;}


#container {
    width: 960px;
    margin: 0 auto;
     background-color: #FAFAFA;
     color: #003300;
     font-family: Arial, Helvetica, sans-serif; background-image:url('backgroundflower5.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;

}

#h2 {text-align: center;}

#container {
            width: 960px;
            margin: 0 auto;
        }

        #container div {
            border: 1px solid black;
        }


        #header {}


#center2 {
            float: left;
            margin: 10px 0 10px 20px;
            min-width: 200px; width: 494px; border-radius:8px;
        }


        #left,
        #center,
        #right {
            float: left;
            margin: 10px 0 10px 20px;
            min-width: 200px;
        }

        #center {font-family: Josefin Slab; background-color: #FFFFFF;
            width: 494px; border-radius:8px; text-align: center;
        } 

        .clear {
            clear: both;
        }

#right { font-family: Josefin Slab; font-weight:bold; border-radius:8px; background-color: #FBEFFB;}

#left a {text-decoration: none;
         display: block;
         text-align: center;
         color: #000000;
         font-weight:bold;
         border: 3px outset #FFFFFF;
         padding: 5px;}

figure{}

#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }

#left ul { list-style-type: none;
          margin: 0;
          padding-left: 0; }



#footer { text-align: center; font-family: Audimat;
    clear: both; width:38%;
        border-radius: 8px;
        background-color:white;
        text-align:center; margin-right:auto;
        margin-left:auto; }
4

1 に答える 1

4

各列に 20px の余白が設定されています。それらの間にそのスペースが必要ない場合は、次のコードを変更します。

#left, #center, #right {
            float: left;
            margin: 10px 0 10px 20px;
            min-width: 200px;
        }

このようなものに：

#left, #center, #right {
                float: left;
                margin: 0;
                min-width: 200px;
            }
于 2012-12-02T05:18:20.317 に答える