html - 带标题的 Div

标签 html css

我想创建一个 <div>其中有一个以大写字母显示的标签/标题。 <div>250px宽。

<div>里面, 我会再放一个 <div>它将包含控件。此内<div>应该是 center对齐和外部 <div>应自动增加其高度以适应控件高度。

外层<div>和内部<div>应该有边框。

这可以用 CSS 实现吗?

最佳答案

我不确定你在问什么,但也许这会有所帮助?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            div#wrapper { display:block; width:250px; height:auto; margin:auto; padding:0; border:1px solid #F00; }
            div#wrapper h1 { text-transform:uppercase; text-align:center; }
            div#controls { display:block; width:100%; height:100px; margin:0; padding:0; border:1px solid #000; text-align:center; }
            div#controls a { display:inline; margin:0 5px; line-height:100px; }
        </style>
    </head>
    <body>
        <div id="wrapper">  
            <h1>header</h1>
            <div id="controls">
                <a href="#">control</a>
                <a href="#">control</a>
                <a href="#">control</a>
            </div>
        </div>
    </body>
</html>

关于html - 带标题的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1973209/

相关文章:

javascript - 扩展 div 检测窗口大小以防止超出窗口屏障

html - Bootstrap 3.1.1 导航栏折叠时的不同布局

php - 仅验证我的文本框中的数字和字母

c# - 将按钮可见性设置为隐藏的错误代码

html - 如何使中间div的宽度响应

html - 列不会与 Bootstrap 水平对齐

javascript - 用于在 Safari 中放大图像的 Stuttery CSS 动画

javascript - 如何添加指向外部 ".html"的灯箱中打开的图像的链接?

javascript - 在图像顶部显示 Iframe?

javascript - 删除表行jquery