我正在尝试从头开始学习 html/css 并开始了一个小元素。我在这里研究了这些主题，但我发现它有点高级，希望有人能一步一步地向我解释，这样我就可以从中学到一些东西:)
挑战 1: 我正在尝试垂直获得全出血颜色。问题是我在颜色区域周围有一个白色框。我使用下面的代码让它在左侧和顶部边到边移动。
margin-right: -8px;
margin-top: -8px;
但它不会一直走到右边的边缘。 我会在下面发布我的 html 和 css。任何帮助将不胜感激:)
HTML
<div id="feature1">
<div id="feature1_cont">Content for New Div Tag Goes Here</div>
</div>
CSS
#feature1 {
height: 400px;
width: 100%;
float: left;
background-color: #0CC;
margin-left: -8px;
margin-right: -8px;
}
#feature1_cont {
font-family: Arial, Helvetica, sans-serif;
font-size:36px;
margin-top: 7%;
margin-left: 7%;
min-width: 300px;
max-width: 600px;
background-color: #0F9;
}
挑战 2: 我在一个 div 中也有 3 个 div。我想将它们居中，以便移动并始终位于中心。但我只能让他们留在左边。代码如下
CSS
#feature2 {
width: 100%;
heigt: 100%;
float: left;
background-color: #C96;
margin-left: -8px;
margin-right: -8px;
}
#feature2_cont {
width: 400px;
height: 400px;
background-color: #36F;
margin-top: 5%;
margin-left: 5%;
margin-bottom: 5%;
float: left;
}
HTML
<div id="feature2">
<div id="feature2_cont">Content for New Div Tag Goes Here</div>
<div id="feature2_cont">Content for New Div Tag Goes Here</div>
<div id="feature2_cont">Content for New Div Tag Goes Here</div>
</div>
最佳答案
挑战 1:
移除 #feature1 上的负边距并添加 * { margin: 0;填充:0； 到你的 css 的顶部
挑战 2:
删除 float: left; 并将 margin: 0 auto; 添加到 #feature2_cont
关于html - Css html 完全流血和居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15208426/