我相信以前有人问过这个问题,但我似乎找不到答案。
我有以下标记:
<div id="foo">
<div id="bar">
here be dragons
</div>
</div>
我的愿望是让foo具有600px
(width: 600px;
)的宽度,并使bar具有以下行为:
padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;
换句话说,不是将bar的宽度设置为592px
,而是将bar的外部宽度设置为100%
,以便将其计算为592px
。这里的重要之处在于,我可以将foo的宽度更改为800px
,并且bar将在渲染时进行计算,而不必手动计算所有这些实例。
这在纯CSS中是可能的吗?
更多的乐趣:
#bar
是表格怎么办?#bar
是文本区域怎么办?#bar
是输入怎么办?<代码>H217<代码>H118如果<代码>D19是表格单元格(<代码>D20)怎么办?(这是改变了问题还是相同的问题?)到目前为止,已经讨论了table#bar
、input#bar
。我还没有看到一个好的textarea#bar解决方案。我认为没有边框/边距/填充的文本区可以与div
样式一起工作,作为textarea
的边框。
发布于 2010-02-10 04:54:29
编辑
这三个不同的元素都有不同的呈现规则。
因此,对于:
table#bar
您需要将宽度设置为100%,否则它将只有所需的宽度。但是,如果表行的总宽度大于bar
的宽度,它将扩展到所需的宽度。如果我没记错的话,你可以通过设置display: block !important;
来解决这个问题,尽管我已经有一段时间没有解决这个问题了。(如果我错了,我相信有人会纠正我的。)
我认为textarea#bar
是一个块级元素,所以它将遵循与div相同的规则。这里唯一需要注意的是,textarea
的属性是cols
和rows
,这两个属性是以字符列为单位度量的。如果这是在元素上指定的,它将覆盖css指定的宽度。
input#bar
是一个内联元素,所以默认情况下你不能给它分配宽度。然而,与textarea
的cols
属性类似,它在元素上有一个size
属性,可以确定宽度。也就是说,你总是可以通过在你的css中使用display: block;
来指定宽度。然后它将遵循与div相同的呈现规则。
td#foo
将被呈现为一个疯狂的table-cell
。这里的底线是,为了您的目的,它将像div#foo
一样限制其内容的宽度。这里唯一的问题是列中某处可能无法换行的文本,这将使其忽略您的宽度设置。此外,列中的所有单元格都将获得最宽单元格的宽度。
这是块级元素的默认行为-即。如果宽度是auto
(默认值),那么它将是包含元素的内部宽度的100%。所以从本质上说:
#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
会给你你想要的东西。
发布于 2010-02-10 04:54:11
差不多了,只需将outerWidth: 100%;
更改为width: auto;
(outerWidth不是CSS属性)
或者,将以下样式应用于bar:
width: auto;
display: block;
发布于 2014-10-01 20:31:47
使用样式
left: 0px;
或/和
right: 0px;
或/和
top: 0px;
或/和
bottom: 0px;
我认为在大多数情况下,这样做是可行的。
https://stackoverflow.com/questions/2232440
复制相似问题