Question

我正在制作一个有内容盒的页面，并且盒子是响应的，这样当没有足够的空间时，会有一个换行符并且会掉到另一行。我想绝对定位相对于顶部最右边的盒子的东西，所以我需要一个容器具有完全相同的盒子宽度，即使我调整窗口大小，然后我可以定位：绝对我想要的元素放在那里。

我遇到了this post。它告诉我使用display:inline-block;来做这个伎俩，但它不能像我预期的那样工作。请参阅我的示例here。我希望蓝色边框容器在调整大小时与其内容的宽度完全相同，但不能更宽。

我也尝试了display:inline;，but it变成了两行。我希望它在一个盒子中，所以当我使用右：0时，它不会指向底部的最后一个框。

关于这个问题的任何想法？谢谢！

Answer 1

这是什么意思？ http://jsfiddle.net/WH6XD/4/

.box_holder {
    border:1px solid red;
    display:inline-block;
    white-space:nowrap;  //new line
    padding:10px;  //new line
}
.box {
    width:30px;
    height:20px;
    margin-left:10px;  //changed from margin
    background-color:red;
    display:inline-block;  
    vertical-align:top;  //new line
}

.box:first-child {  //new rule
    margin-left:0;
}

Answer 2

您可能需要设置“min-width：XXXpx;”描述符，以防止窗口调整容器大小。 “显示：内联块;”只是告诉divs以防止默认的块属性，它告诉每个连续的div被视为换行符。当内容窗口空间已满时，它不会阻止发生换行。把它想象成导致div在文本字段中作为字母起作用，当使用的空间已满时，它会断开到下一行。

使容器的内容宽度相同

2 个答案: