Question

我所拥有的是一些类别，并且我将它们设置为inline-block。我希望它们根据屏幕尺寸跳到下一行，这在我没有设置填充的情况下非常理想...但是我也想在左侧和右侧有10％的填充。当我手动调整屏幕大小时，填充会导致内嵌块div在div的中心而不是在右边缘处断裂，如您在图像中看到的那样。...

https://photos.app.goo.gl/8f4eg88HbQMAgPnD6

有没有办法解决这个问题？

编辑

对不起

.category-container {
    color: white;
    font-size: 14pt;
    background-color: #B37A1E;
    width: 100%;
    min-height: 100px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.category {
    color: black;
    display: inline-block;
    width: 150px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #A2CBFA;
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    verticle-align: center;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

类别容器是图像中的大橙色div，类别是橙色div中包含的较小的蓝色div。

Answer 1

尝试一下：

.category-container {
    display:flex;
    flex-wrap: wrap;
    max-width: 100%; // use max-width instead of width
    color: white;
    font-size: 14pt;
    background-color: #B37A1E;
    min-height: 100px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10px;
    padding-bottom: 10px;
}

Answer 2

您可以将box-sizing: border-box;添加到您的容器中。

这里是Pen

内联块中断填充

2 个答案: