0

在我的项目网站上，我正在做一个三栏布局，在我在这里得到的帮助下，我能够走得很远。

这是我的网站：

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

我正在尝试使我的三列布局类似于提供的图片，但我的问题是左列、右列和中列。如您所见，当我在左列上放置背景颜色时，它会在中心和右侧之间产生间隙，左侧也是如此。

它看起来真的很不专业而且不干净，我不明白为什么它们在所有列之间都有差距，为什么我不能均匀地匹配它们。标题也是如此。任何想法为什么？

在此处输入图像描述

下面是我的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

您为每列设置了 20 像素的边距。如果您不想要它们之间的空间，请更改以下代码：

#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 回答