Question

首先......我该如何解决这个问题： http://jsfiddle.net/kLjcq/

我在浏览器上看到这个格式正确..！

但是在fiddel上它会让事情变得混乱...... :(发生了什么事？我能解决这个问题吗？

第二个是..如果我有长串...它会射向该标题的浅灰色边框 “从xml中读取......”东西

我正在寻找的是这个文本的最大传播范围上升到那个边界..然后......它会中断到下一行..所以文本被正确封闭..

在div.content中

div.content {
    background-color: #add8e6;
    display:inline-block;
    margin-top: 20px;
    border-radius: 10px;
    position: relative;
    top:-5px;
}

我尝试添加限制和内容..但它将蓝框限制为像素值但相反，我希望文本（和蓝框）限制到某个限制之后突破新线...... 任何线索。感谢

Answer 1

你绝对定位.checksheet课程。这将其从文档流中删除。像.content - 类这样的其他元素并不关心它。

我不知道你为什么在这种情况下使用position: absolute;，但这会产生你的错误。

Answer 2

你的小提琴正在破碎，因为你正在使用绝对定位。当屏幕较窄时，清单中的元素会回绕，但后面的元素的位置使得前面的元素只有1行而不是2行。

如果没有与第二个问题相关的实际标记，我们只能猜测实际问题是什么。但是，由于您在提供的示例中使用了pre，因此很可能是罪魁祸首。你需要的是添加这样的属性：

white-space: pre-wrap

如果没有这个属性，pre标签通常不允许元素自动换行，这会导致它占用尽可能多的水平空间来显示所有文本。

修复html和css

2 个答案: