html - 如何让一个对象不占用它的自然宽度

Question

我有一个垂直对齐的 DOM 对象。其中之一，比如说 <div id="foo"> , 具有比其余部分更宽的自然宽度。我希望该元素不占用其自然宽度，但让其他部分(其 sibling 中最宽的，或父宽度，以较宽者为准)确定宽度，并让 <div id="foo"> 的水平溢出部分 |被隐藏起来。

<div>
  <div>some content</div>
  <div id="foo">a content with very wide width</div>
  ...
  <div>some content</div>
</div>

我希望它看起来像这样:

包含内容的 div "Another content"确定宽度，因为它的自然宽度比不包括 <div id="foo"> 的其他 sibling 宽.

我如何使用 CSS 做到这一点？

Answer 1

您可以使用显示表格属性和负边距将元素的宽度几乎减小到零。 <强> DEMO HTML 测试

<div class="content">
  <div> blab bla bla bla bla </div>
  <div class="refW">my width</div>
  <div>blop blop blop blop blop blop blop blop blop</div>
</div>

CSS 测试

.content {
  display:table;
  width:0%;/* will expand to fit to content */
  margin: auto;
  overflow:hidden;
  border:solid;
}
.content div {
  white-space:nowrap ;  
  margin-right:-9999px;
  background:red;

}
.content div.refW {
  margin-right:0px;
  background:green;
}