css问题和添加到div的解决方案答案

【问题标题】：css problems and solution to adding to a divcss问题和添加到div的解决方案
【发布时间】：2011-07-21 07:48:48
【问题描述】：

我有一个问题，我试图用 css 解决它，我用一张图片告诉你：

我的 CSS：

div#test {
width:90%; 
z-index:1; 
padding:27.5px; 
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
}

我试图让它包含在所有浏览器类型中？

我想知道的另一个问题是，如果您查看下面的第一张图片和裁剪后的图片，我还想尝试向每个 div 添加 X 加评论和 img（超链接），如下所示：

不确定是否可以通过 css 实现？

【问题讨论】：

在哪些浏览器中失败？另外，能否包含您的 HTML 代码？
我相信您的第一个问题可以通过在您的 div#test 中添加“位置：相对”来解决。另一个问题的答案取决于您从哪里获取数据。个人建议您使用 asp:repeater 这样做。

标签： asp.net html css stylesheet

【解决方案1】：

对于第一个问题，这应该可以解决问题：

white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;

这些顺序很重要，对于 CSS2/CSS2.1/CSS3 渐进增强。

对于第二个问题，当然可以，但从语义上讲，这取决于图像的内容。如果与内容无关，请使用background-image: url('somepath/someimage.png');。否则在 HTML 中使用 img 标记。

【讨论】：

我想在asp后面的代码中设置img的内容，如果可能的话，我还想缩小图像？如果你能修改两个部分的答案，我会给你正确的答案。
图片在 div 中的位置呢？以及 commenst 和 x 超链接？
我的意思是将img设置为可以css设置asp imgs吗？

【解决方案2】：

您问题的第一部分听起来您需要使用 CSS word-wrap：

#test {
    word-wrap: break-word;
}

请参阅https://developer.mozilla.org/En/CSS/Word-wrap 了解更多信息。

另请参阅http://caniuse.com/#search=word-wrap 了解浏览器支持的详细信息（它几乎得到了普遍支持，因此没有问题）。

对于问题的第二部分，您应该将容器<div> 设置为position:relative;。然后，您可以将position:absolute; 用于其中您想要位于固定位置的元素，并将它们定位为top、bottom、left 和right（如果适用）。

【讨论】：

【解决方案3】：

对于您的第一个问题，请尝试添加word-wrap: break-word;。

对于您的第二个问题，您可以尝试使用 CSS :after 伪选择器（仅限 IE 8+），但我认为您最好使用 JavaScript 执行此操作（即在 DOM 加载后，遍历每一行并创建/附加一些新标签） - jQuery 可以让这变得非常简单。

【讨论】：