Question

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

在<div>内，我会放置另一个<div>，其中包含控件。内部<div>应该center对齐，外部<div>应自动增加其高度以适应控件高度。

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

这可以用CSS吗？

Answer 1

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

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

Answer 2

你的意思是这样吗？

<style type="text/css">
    .panel { width: 250px; padding: 5px; border: 1px solid #666; }
    .panel h1 { margin: 0 0 5px; padding: 0; text-transform: uppercase; }
    .panel .content { padding: 5px; border: 1px solid #666; }
</style>
<div class="panel">
    <h1>Title</h1>
    <div class="content">
        ... controls ...
    </div>
</div>

用标题划分

2 个答案: