我有以下标记:
<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%;
换句话说,不是将条的宽度设置为592px我想将条的外部宽度设置为100%,以便它被计算为592px。这里的重要性在于,我可以将foo的宽度更改为800px,而bar将在渲染时计算,而不是手动对所有这些实例进行计算。
这是可能在纯CSS?
一些更有趣的:
>如果#bar是一个表呢?
>如果#bar是textarea怎么办?
>如果#bar是一个输入?
>如果#foo是表格单元格(td)怎么办? (这是否改变了问题或问题是否相同?)
到目前为止的表#bar,输入#bar已经讨论过了。我没有看到一个很好的解决方案textarea#bar。我认为一个textarea没有边框/边缘/填充与一个div包装可能与div样式工作作为textarea的边框。
解决方法
那三个不同的元素都有不同的重写规则哈哈。
因此对于:
table#bar你需要将宽度设置为100%,否则它将只有它决定它需要的宽度。但是,如果表行总宽度大于条的宽度,它将扩展到所需的宽度。如果我记得你可以通过设置display:block!important来解决这个问题。虽然它已经一段时间,因为ive必须解决这个问题。 (确保有人会纠正我,如果错误)。
textarea#bar i beleive是一个块级元素,因此它将遵循与div相同的规则。这里唯一的警告是textarea取字符列的行和列的属性。如果在元素上指定,它将覆盖由css指定的宽度。
输入#bar是一个内联元素,因此默认情况下你不能分配宽度。但是,与textarea的cols属性类似,它在元素上具有可以确定宽度的size属性。也就是说,你可以通过使用display:block指定宽度;在你的css中。然后它将遵循与div相同的呈现规则。
td#foo将被渲染为一个表格单元格,它有一些疯狂。这里的底线是,为了你的目的,它的行为就像div#foo一样限制其内容的宽度。这里唯一的问题是潜在的不可打包的文本在某处,这将使它忽略你的宽度设置。此外,列中的所有单元格都将获取最宽单元格的宽度。
这是块级元素的默认行为 – 即。如果width是auto(默认值),那么它将是包含元素的内部宽度的100%。所以本质上:
#foo {width: 800px;} #bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
会给你你想要什么。