我试图在容器div中有4个具有不同背景颜色的div，所以在所有四个角中都有一个在中间有一个钢蓝色边框交叉。问题是我在样式表中给出div元素的宽度和高度，但它们实际上并没有改变div的高度，只添加了内容。此外，4个内部div不具有我在stlyesheet中指定的宽度，而是适合父div的宽度。只是fyi，在要素类中，我已将显示attrubute切换为阻止和内联以查看是否有帮助，但它没有。这是我的HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Divs In Div</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="feature a"> </div>
<div class="feature b"> </div>
<div class="feature c"> </div>
<div class="feature d"> </div>
</div>
这是我的css代码：
.container {
width: 700px;
height: 700px;
border: 5px solid black;
margin: 0px;
padding: 0px;
display: inline-block;
}
.feauture {
width: 348px;
height: 348px;
padding: 0px;
margin: 0px;
display: inline-block;
text-align: center;
}
.a {
background-color: yellow;
border-bottom: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.b {
background-color: red;
border-bottom: 2px solid steelblue;
border-left: 2px solid steelblue;
}
.c {
background-color: blue;
border-top: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.d {
background-color: purple;
border-top: 2px solid steelblue;
border-left: 2px solid steelblue;
}
答案 0 :(得分：2)
首先，是的，这是一个错字，但那不能为你解决整个问题（尽管你还没有问过）关于其余部分，所以这可能是不必要的，如果是这样，请随意忽略）。
如果要对inline-block块使用.feature，则需要更改HTML。 See why this is a problem here。如果你可以使用float:left;代替他们，那么你就不必这样做了。
根据您是否选择使用box-sizing表示您拥有的所有元素（例如使用Normalize.css解决方案，或仅仅使用我在小提琴中执行的操作），您可能需要更改宽度和高度以仅考虑容器上的边框。 box-sizing: border-box;上的See how, why and pros/cons here。
你的CSS并不可怕，所以我所做的改变主要是审美，但你必须决定的主要内容是display: inline-block;或float: left;内的.feature { }。
仅供参考 - 使用float: left;隐含display: block;，更不用说<div>默认使用它了。
display: inline-block; <div class="container"><div class="feature a">
</div><div class="feature b">
</div><div class="feature c">
</div><div class="feature d">
</div>
</div>
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container {
width: 710px;
height: 710px;
border: 5px solid black;
margin: 0px;
padding: 0px;
}
.feature {
width: 350px;
height: 350px;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
.a {
background-color: yellow;
border-bottom: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.b {
background-color: red;
border-bottom: 2px solid steelblue;
border-left: 2px solid steelblue;
}
.c {
background-color: blue;
border-top: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.d {
background-color: purple;
border-top: 2px solid steelblue;
border-left: 2px solid steelblue;
}
float: left; <div class="container">
<div class="feature a"></div>
<div class="feature b"></div>
<div class="feature c"></div>
<div class="feature d"></div>
</div>
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container {
width: 710px;
height: 710px;
border: 5px solid black;
margin: 0px;
padding: 0px;
}
.feature {
width: 350px;
height: 350px;
padding: 0;
margin: 0;
float: left;
text-align: center;
}
.a {
background-color: yellow;
border-bottom: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.b {
background-color: red;
border-bottom: 2px solid steelblue;
border-left: 2px solid steelblue;
}
.c {
background-color: blue;
border-top: 2px solid steelblue;
border-right: 2px solid steelblue;
}
.d {
background-color: purple;
border-top: 2px solid steelblue;
border-left: 2px solid steelblue;
}
PS - 你的宽度和高度在这里被改变以保持连续性，但你可以使用你想要的任何尺寸。
答案 1 :(得分：1)
.feauture {
应该是
.feature {