Question

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

这是我的网站：

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

我正在尝试使我的三列布局与提供的图片类似，但我的问题是左，右和中间列。当我在左栏上放置背景颜色时，你可以看到它在中间和右边之间产生了一个间隙，左边也是如此。

它看起来真的很不专业而且不干净，我不明白为什么它们是所有列之间的间隙，以及为什么我不能均匀匹配它们。标题也是如此。有什么想法吗？

enter image description here

以下是我的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; }

Answer 1

每列的边距设置为20px。如果您不希望它们之间有空格，请更改以下代码：

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

这样的事情：

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

HTML三页布局列间隙问题

1 个答案: