Question

我有这个HTML：

  <div class="container">
      <span>
        The lime outlined .container had two vertically stacked elements, this text (which is inline) and the salmon .fixed-width box which is block and has an explicit width and height set externally. I want .container to shrink to the size of .fixed-width and the inline content to wrap. I do not want to have to set an explicit width on .container.
      </span>
      <div>
        <div class="fixed-width"></div>        
      </div>
  </div>

和这个css

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
}

/*for debugging*/
.container { outline: 1px solid lime; }  
.container * { outline: 1px solid blue; }

我希望.container的大小与.fixed-width 的大小相同，而在其他地方明确设置它，从而使内联文本换行并且不大于宽度为200像素。

我很确定使用css2是不可能的，但我的浏览器要求非常现代（我在同一页面上使用flexbox）所以我希望有一种方法可以用css3来实现。

如果需要，我愿意在这里引入一些新的标记。

Answer 1

缩小内容本身，<table>布局属性似乎就是您所需要的。

非常感谢这个问题，显示了目前我没有注意到的Blink Egine的行为。

我们可以通过CSS使用这些属性，并注意编辑 ，对于Chrome / Opera使用的Blink渲染引擎，需要一种解决方法。

我们需要在父级上使用设置为0的宽度来尽可能地缩小它，因为无论如何，它都需要100％的父级宽度：

http://jsbin.com/UhOQEzOz/2/edit

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
  display:table;
  table-layout:fixed;
}

.container {
  outline: 1px solid lime;
  display:table-row;

}  
.container * {
    outline: 1px solid blue;
  }
article {
  width:0;
}

http://jsbin.com/UhOQEzOz/2/edit

我可以强制内联文本换行，具体取决于同一容器中另一个元素的大小吗？

1 个答案: