html - pre tag width:100% or max-width:100% overflow:auto 不灵活

Question

这是一个示例的链接： http ://whiterootmedia.com/database/dusty_arlia/the_img_tag_and_its_attributes.html

我的标签元素将包含长行代码。每当其容器更改为 width:auto（宽度低于 1200 像素）时，标签的宽度都不会缩小。我希望窗口继续缩小，并且元素的宽度有一个滚动条。

目前我有这个CSS：

预{溢出：自动；最大宽度：100%}

Answer 1

我将此 css 添加到我的display:table;容器中：

table-layout:fixed;
width: 100%;

CSSdisplay:table布局更难设置样式。如果您刚刚开始，只需使用 float 在容器中定位 div。

Answer 2

您的 css 文件中有固定值，请查看prewhen <的样式1200px

article_two_column.css:101

@media only screen and (min-width: 336px) {...

article_two_column.css:103

pre {
    max-width: 260px; 
}

article_two_column.css:87

@media only screen and (min-width: 728px) {...

article_two_column.css:89

pre {
    max-width: 652px;
}

将值设置为%，您将获得流畅的结果（请记住，您还可以设置小数，而不仅仅是 int）。