Question

在此示例中，两个引号都具有相同的宽度。我想要发生的是报价的宽度由报价的长度决定，但它不能超过200px。

所以第一个引号的宽度应该是200px，但是第二个引号应该动态为60px，在第一行的5之后结束。

我该怎么做？

CSS

.inner_quote {
    background:RGBA(255,250,205,.4);
    margin-left:50px;
    max-width:200px;
    display:block;
}

HTML

<span class="inner_quote">
    1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 
</span>
...
<span class="inner_quote">
    1 23 345
    <br>
    5552
</span>

Answer 1

你试过display:inline-block吗？

Answer 2

property-display：block尝试占用所有可用宽度。

由于您在第一个范围内提到max-width属性为400px，因此它不会更进一步。虽然在第二种情况下像素需要较少但显示：block属性尽可能地拉伸容器，然后受到所提到的最大宽度的限制。

property-display：inline-block将解决这个问题，因为它维护了块结构，只占用了容器所需的空间。

Answer 3

宽度问题归结为你的显示：block; on .inner_quote;块将填充可用宽度......

现在你可以通过浮动（浮动：左;）来解决这个问题，但你需要做一些浮动清理以保持整洁......

为什么在这种情况下max-width不工作？

3 个答案: