Question

我正在练习改进我的编码，我正在尝试从此页面复制布局http://imgur.com/pM8owcj

我坚持使用3列部分，因为每列都与另一列重叠。

我是初学者，你可以看到，我真的很感激任何帮助。

以下是代码的链接：http://codepen.io/porpita/pen/ElKty

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="estilo.css" rel="stylesheet" type="text/css">
        <title>
        Ejercicio Multimedia
        </title>
    </head>
    <body>
        <section id="content">
            <div id="header">
            </div>
            <div id="headermenu">
            </div>
            <div id="imagenprincipal">
            </div>
            <div id="espacio">
            </div>
            <div id="galeria">
                <div id="columna">
                    <div id="movimientos"></div>
                    <div id="eventos"></div>
                </div>
                <div id="exposiciones"></div>
                <div id="noticias"></div>
            </div>
        </section>
    </body>
</html>

CSS

#content {
width: 1144px;
margin: 0 auto;
}

#header {
    height: 140px;
    border: 3px #000 solid;
}

#headermenu {
    height: 40px;
    border: 3px #000 solid;
}

#imagenprincipal {
    height: 429px;
    border: 3px #000 solid;
}

#espacio {
    height: 69px;
    border: 3px #000 solid;
}




#galeria {
    height: 825px;
    border: 3px #000 solid;
}

#columna {
    width: 338px;
    height: 825px;
    border: 3px #000 solid;
    float: left;
}

#movimientos {
    width: 338px;
    height: 353px;
    border: 3px #000 solid;
}

#eventos {
    width: 338px;
    height: 472px;
    border: 3px #000 solid;
}

#exposiciones {
    width: 480px;
    height: 825px;

}

#noticias {
    width: 326px;
    height: 825px;
    border: 3px #000 solid;
}

非常感谢。

Answer 1

请参阅此处更新的Codepen：http://codepen.io/anon/pen/tmnrj

你在内部元素周围的边界（#columna, #exposiciones and #noticias）增加了它们的宽度，因此338px宽，3px边框全宽= 344px宽。您需要减小宽度以补偿边框的6个像素（每边3个像素）或在元素上设置box-sizing: border-box;，以便它们在宽度中包含边框。

参考框大小调整：http://css-tricks.com/box-sizing/

你也只是浮动#columna。您需要将所有三个（#columna, #exposiciones and #noticias）浮动，然后在#galeria上设置position: relative; overflow: hidden以确保它包含它们或它将崩溃。

参考浮动广告：http://css-tricks.com/all-about-floats/

旁注 - 在各种元素中添加背景颜色可以帮助识别每个元素发生的事情，如上面提到的那样。

希望有所帮助。

Answer 2

由于您使用的是厚像素边框，因此您遇到了太空问题。边框应用于元素的外部。这意味着如果您设置width 50px，然后在border周围添加3px，则您的最终宽度实际为56px或{{1 }}

MDN对CSS框模型的工作方式有great documentation，它可以节省数小时的填充。

通过使用百分比而不是像像素这样的固定值，浏览器可以更轻松地让您为自己计算内容，而不是尝试手动强制实施。

使用3px + 50px + 3px而不是background-color来测试元素也很方便，因为背景颜色不会影响元素的实际宽度。

以下是使用百分比的布局示例： Fiddle

CSS中的基本3列布局

2 个答案: