0

据我所知，填充是边框和内容之间的空间。我尝试使用填充，但不是将边框缩小到内容，而是将内容推送到新行。

我想要的是保留内容，但边框自动缩放/自动调整内容的大小。如果可能的话，如果内容被调整大小（比如说不同的分辨率或浏览器窗口变小），边框也会跟随内容，但仍然保持填充值（在我的例子中，10px）

从昨天开始一直在玩边距和填充，但仍然不知道该怎么做。伙计们，任何帮助将不胜感激。

td;dr：如何让边框自动调整大小/自动缩放到内容。

html:

<div id="container">

    <div id="eachitem">

    </div>
</div>

CSS：

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
}

容器用于将整个内容定位到基于边距的位置。每个项目都是基于列表的单个项目。这就是我希望边框自动调整大小/自动缩放到项目的地方。

由于不同的内容有不同的长度。我希望它缩小到最大内容，如下图所示： 例子

4

3 回答 3

2

点击演示

   #eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    float:left;
     width:250px;
}
于 2013-07-06T10:54:09.980 回答
1

尝试使用自动换行属性。

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    word-wrap: break-word;
}

这是您的代码的示例。

编辑问题后，我看到您希望边框完全适合内容？好吧，试试这个。

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    display: inline-block;
    word-wrap: break-word;
}

这是一个例子。

于 2013-07-06T10:51:22.690 回答
0

由于文本的不可预测性，基于内容大小调整填充、边距和边框权重在任何语言中都是令人讨厌的。内容长度、字体粗细和大小、显示分辨率和窗口大小都会以多种方式影响文本。此外，像 JS 这样的大多数高级语言在没有实际渲染的情况下无法计算文本尺寸。这意味着您必须首先显示文本，然后计算它占用的空间，然后调整周围的属性。根据可用的 API，您甚至可能无法预测要使用的值。在这种情况下，您必须遍历多个值，查看它的外观，如果不正确，请再次运行所有步骤。不是一个有趣的尝试。

于 2013-07-06T10:44:21.350 回答