【问题标题】：Divs not showing specified height or width未显示指定高度或宽度的 div
【发布时间】：2014-03-22 09:45:37
【问题描述】：

我试图在一个容器 div 中有 4 个具有不同背景颜色的 div，因此所有四个角中都有一个，中间有一个钢蓝色边框交叉。问题是我在样式表中给了 div 元素的宽度和高度，但它们实际上并没有改变 div 的高度，只是添加了内容。此外，4 个内部 div 没有我在样式表中指定的宽度，而是适合父 div 的宽度。仅供参考，在要素类中，我已将显示属性切换为块和内联，以查看是否有帮助，但没有。这是我的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">&nbsp;</div>
    <div class="feature b">&nbsp;</div>
    <div class="feature c">&nbsp;</div>
    <div class="feature d">&nbsp;</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;
}

【问题讨论】：

标签： css html

【解决方案1】：

首先，是的，有一个错字，但这并不能为您解决整个问题（尽管您还没有询问其他问题，所以这可能只是不必要的，如果是，请随意忽略）。

如果您想将inline-block 用于.feature 块，则需要更改HTML。 See why this is a problem here。如果您对他们都使用float:left; 没问题，那么您不必这样做。

根据您是否选择对您拥有的所有元素使用box-sizing（例如使用Normalize.css 解决方案或只是做我在小提琴中所做的事情），您可能需要将宽度和高度更改为仅考虑容器上的边界。 See how, why and pros/cons here box-sizing: border-box;。

您的 CSS 并不糟糕，所以我所做的更改主要是为了美观，但您必须决定的主要内容是 .feature { } 内部的 display: inline-block; 或 float: left;。

仅供参考 - 使用 float: left; 意味着 display: block;，更不用说默认使用 <div>。

使用`display: inline-block;`

新的 HTML：

<div class="container"><div class="feature a">
    &nbsp;</div><div class="feature b">
    &nbsp;</div><div class="feature c">
    &nbsp;</div><div class="feature d">
    &nbsp;</div>
</div>

新的 CSS

*, *: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;
}

Live Demo

使用`float: left;`

新的 HTML：

<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：

*, *: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;
}

Live Demo

PS - 您的宽度和高度在此处更改以保持连续性，但您可以使用任何适合的尺寸。

【讨论】：

【解决方案2】：

.feauture {

应该是

.feature {

【讨论】：

谢谢。当我打开文件时，所有 div 都在各自的行上。为了有 2 个内联，我可以使它们的最大宽度和高度是 346px，即使我应该能够使它们每个 348px，因为它们没有填充、没有边距和 2px 的边框，但只有 2 个边，它们必须适合宽度为 700 像素的容器 div。当宽度和高度设置为 346px 时，中间的边框之间有大约 6px 长的间隙，底部的边距在 2 个 div（c 类和 d 类）和容器 div 之间具有相同大小。如何让所有的边界都接触？
@user1953907 我猜你是想在我的回答中问我这个问题（因此回复迟了）。但这最容易在容器上使用硬尺寸和软内部尺寸（百分比）来完成。看看我修改过的这个小提琴：jsfiddle.net/5dg4X 这使得 .feature 使用一个最大宽度为 50% 的浮点数（将宽度设置为 100%，这样它就可以最大限度地利用 50% 的余量），所以一行总是有 2 个并且将 box-sizing 设置为border-box，您可以将边框设置为您想要的大小，并且尺寸将包含在宽度中。

使用display: inline-block;

新的 HTML：

新的 CSS

Live Demo

使用float: left;

新的 HTML：

新的 CSS：

Live Demo

使用`display: inline-block;`

使用`float: left;`