如何在css和html中设置div的高度

Question

我正在使用Twitter Bootstrap.我用我的html写道:

<div style="height:100px;" class="span12">
asdfashdjkfhaskjdf
</div>

打开该页面时为什么高度不是100px？

对于后代,原始代码是: <div height="100px">

Answer 1

要编写内联样式,请使用:

<div style="height: 100px;">
asdfashdjkfhaskjdf
</div>

内联样式有用,但在大多数情况下不建议使用.

更"正确"的解决方案是创建一个单独的CSS表,将其包含在HTML文档中,然后使用ID或类来引用您的div.

如果你有文件结构:

index.html
>>/css/
>>/css/styles.css

然后在你的HTML文档<head>和之间</head>写:

<link href="css/styles.css" rel="stylesheet" />

然后,将您的div结构更改为:

<div id="someidname" class="someclassname">
    asdfashdjkfhaskjdf
</div>

在css中,您可以从ID或CLASS引用您的div.

这样写:

.someclassname { height: 100px; }

要么

#someidname { height: 100px; }

请注意,如果同时执行这两项操作,那么文件结构中较远的那个将是实际工作的那个.

例如......如果你有:

.someclassname { height: 100px; }

.someclassname { height: 150px; }

然后在这种情况下,高度将是150px.

编辑:

要从您的编辑中回答您的第二个问题,可能需要overflow: hidden;或overflow: visible;.你也可以这样做:

<div class="span12">
    <div style="height:100px;">
        asdfashdjkfhaskjdf
    </div>
</div>

Answer 2

<div style="height: 100px;"> </div>

要么

<div id="foo"/> and set the style as #foo { height: 100px; }
<div class="bar"/> and set the style as .bar{ height: 100px;  }