頁面布局混亂

Question

我有很多使用完全相同的html結構的網頁。

由於某種原因， 該頁面上的寬度弄亂了。 這就是應該看起來像http://bit.ly/Ie7yZ4的布局。

這些頁面上的唯一區別是從MySQL數據庫傳遞的文本內容。

我認為問題與頁面上的前幾段有關，但我無法弄清楚是什么。

PS：請，如果您不知道如何解決該問題，但想向我介紹無表布局和div，請屏住呼吸-我有理由選擇表格，所有頁面的排名都很高在Google中，加載速度快且易於維護。

Answer 1

原因在頁面底部的“ Search tags部分。 有長文本，沒有任何空格會拉伸表格單元格。

添加空格或作為選項添加到span標記樣式屬性

width: 600px;
display: block;
word-wrap: break-word;

Answer 2

這是因為搜索標簽很長。

您可以用一些CSS來更改它：

width: 615px;
display: block;
word-wrap: break-word;

將其添加到保存標簽的范圍內，您應該會很好。 這會將標簽包裝在容器內。

或在每個逗號后添加空格。

Answer 3

最后一個跨度“搜索標簽”具有幾個非常長的句子，沒有任何空格。 這些線強制布局寬度。 例如： 08601,08602,08603,08604,08605,08606,08607,08608,08609,08610,08611,08618,08619,08620,08625,08628,08629,08638,08641,08645,08646,08647,08648,08650,08666,08690,08691,08695,

我建議在這些單詞之間添加空格，以便可以在多行上顯示它，或者將它們放在具有最大寬度的滾動容器中。

Answer 4

在該段的包含<p> ，就是這么長的alt標記，它令人討厭：

alt =“ Mold Testing Trenton，新澤西州默瑟縣新澤西州08601，08602,08603,08604,08605,08606,08607,08608,08609,08610,08611,08618,08619,08620,08625,08628,08629,08638,08641,08645 ，08646,08647,08648,08650,08666,08690,08691,08695，”

刪除可修復該段落。

Answer 5

您在段落末尾的跨度中包含的搜索標簽存在問題，如果您確實需要它們（我個人將使用display: none ，或將其完全刪除）），則需要應用table-layout: fixed; 到桌子上，然后word-wrap: break-word; 到跨度。