代码之家 › 专栏 › 技术社区 › stevebot

如何使一个DIV的内容具有相同的宽度和高度?

css html

stevebot · 技术社区 · 14 年前

假设我有一个 img A中的元素 div ,我该怎么做 div 使用CSS时,其内容的宽度和高度是否相同?

5 回复 | 直到 14 年前

meder omuraliev 14 年前

浮动DIV将使其收缩包装,因此DIV将只为内部内容留出空间。

您可能需要使用 clear 在接下来的天气里。

另一种方法是 inline-block .

Sammy 14 年前

内联块是正确的。

<div style="border:1px solid red;display:inline-block">
    <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" style="border:1px solid green" />
</div>

Lee 14 年前

默认情况下,DIV将具有相同的高度——除非您以某种方式限制它,或者添加填充或边距。但默认宽度将填充可用空间。如果您希望宽度向下折叠为“收缩包装”内容,您要么将其浮动,要么将其绝对定位。

这方面的问题(取决于您的需要)是,这两个都有效地将其从正常布局中去掉。如果您需要它仍然是正常布局的一部分,您必须这样做(包括边框,这样您就可以知道发生了什么):

<html>
<head>
<title>pdf test</title>
    <style type="text/css">
        #a {
            position:relative;
            border: 1px solid green;
        }
        #b {
            float: left;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <div>Top</div>
    <div id="a">
        <div id="b">
            asdf<br/>
            typewriter</br>
            fdsa
        </div>
        <div style="clear:both;"></div>
    </div>
    <div>
        Bottom
    </div>

</body>
</html>

外部分区 #a 像一个普通的分区一样工作。这里的重要部分是 αa 是 position: relative . 它建立了一个定位环境,其中 #b 将浮动。这种“双包装”的方法将允许DIV在布局中像“普通”DIV一样工作,同时允许您从 αb 如果需要,可以通过javascript。

所以…这取决于你的需求是什么——但这会让你走上正确的方向。

祝你好运!

Mohamed Nuur 14 年前

尝试此CSS:

div {
  display: inline;
}

Jason 14 年前

IE中不支持任何默认块级元素(如DIV、H1-H~等)的内联块。

内联块行为是自动调整宽度和高度的大小,同时允许使用位置、边距和填充等内容。所以你真正需要做的就是利用

<span style="display: inline-block">
</span>

然后您将得到一些与浏览器兼容的代码:)

享受。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前