Question

我正试图建立一个表格＆＃39;使用CSS，但如果内容太短，我无法获得一些<DIV>来填充布局的宽度。

用文字解释很难，所以这里有一个小提琴： https://jsfiddle.net/fatmonk/r2sodp7p/

基本上我不想看到示例中的粉红色位 - 我希望浅蓝色框展开以填充宽度，无论内容中有多少或多少内容。

使用display: table-row做正确的事情就是填充线条，但不允许设置边框。

（小提琴不是整个页面 - 还有更多＆＃39;行要添加，整个＆＃39;表格将重复链接沙链接代码和其他位和碎片。）

它引用的可能是，在尝试实现此功能的过程中，我也过度复杂了HTML - 我最终添加了容器<DIV>来尝试强制宽度，因此HTML也可能需要修剪，但我已经没有想法。

Answer 1

从所有width:auto的内嵌样式标记中删除.menuContentInPopup，并在您的css中为其添加width: 100%，所以

<div id="poster2" class="menuContentInPopup" style="width: auto;">

会变成

<div id="poster2" class="menuContentInPopup">

和css：

.menuContentInPopup{
    display: table;
    height:auto;
    border: 1px solid rgba(99,99,99,.75);
    border-top: none;
    background-color:rgba(235,245,255,1);
    padding:5px;
    font-size: 10pt;
    text-align: justify;
    left: 0px;
    right: 0px;
    float: none;
    width: 100%;
}

这是一个显示结果的小提琴：Fiddle。

我还调整了所有元素的box-sizing，以便在宽度为100％时向元素添加填充不会使其溢出其父级，这可以通过

实现

* {
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    box-sizing: border-box;
}

Answer 2

我可能理解错了，但这是我如何解决它。 [小提琴] [1] 我将宽度更改为100％，因此它将填满您的完整div。还删除了HTML中的宽度：auto。

  [1]: https://jsfiddle.net/r2sodp7p/10/

Answer 3

仅供参考，这是您案件的另一个清洁解决方案：

[http://jsfiddle.net/giaumn/f99ub6ro/]

您只需要关心2个属性：

溢出：自动;

on .menu-content和

float：left;

on .poster-thumb

Answer 4

将width:auto;设置为width:100%;并将width:100%;添加到menuContentInPopup课程。从html内联样式中删除width:auto。

fiddle

div不会用css填充宽度

4 个答案: