Когда мы разрабатываем веб -страницы, мы всегда сталкиваемся с некоторыми неприятными вещами. Наиболее распространенным является то, что после добавления контента в фоновом режиме мы обнаруживаем, что отображаемая страница распределена, что делает веб -страницу чрезвычайно неприглядной. В прошлом люди в основном разработали таблицы, поэтому онлайн, естественно, есть много решений. Теперь существуют стандартные конструкции Div CSS, и они редко видят связанные хорошие методы. Теперь Xioxiang Online суммирует хорошие методы, обнаруженные в повседневной жизни, чтобы предотвратить разброс таблиц и поделиться ими с вами.
1. Установите размер изображения непосредственно на веб -странице, например, код: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg width = 600 высота = 500 граница = 0>. Хотя это может ограничить размер изображения, вам необходимо вручную изменить размер изображения перед загрузкой изображения, в противном случае загруженное изображение будет деформироваться.
2. Используйте следующий код: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg onload = javascript: if (this.width> 600} {this.Resised = true; this.style.width = 600;}>
Этот метод будет автоматически сжиматься до указанной ширины при вызове изображения, что не приведет к деформированию изображения, и не сломает таблицу. Однако недостаток заключается в том, что если изображение слишком велика, во время процесса загрузки изображения, то есть во время процесса отображения изображения, она сначала будет отображаться в исходном размере изображения, который сломает таблицу, и страница будет уродливой. Во -вторых, когда изображение полностью отображается, изображение автоматически уменьшится.
3. Мы можем ограничить размер таблицы, чтобы предотвратить ее растяжение, например, добавить код в <таблица = 600 Border = 0 cellPadding = 0 cellpacing = 0> style = table-layout: фиксирован; Word-wrap: break-word; Word-Break; Break-All;, Table-layout: фиксированный; это исправить макет таблицы, что может эффективно предотвратить растяжение таблицы. Word-wrap: слов-слова; для контроля разрывов линии, то есть для обеспечения соблюдения линейных разрывов. Это должно использоваться, когда есть много текстового контента. Появляется экстраординарный дублированный контент, и если разрывы строки не будут выполнены, таблица будет растянута; и разрыв в словесном: разрыв; Это может решить проблему, что структура IE распространяется по английскому языку (неазиатские текстовые линии), но не заставит линейную упаковку, и отображается только содержание в ширине таблицы. Вообще говоря, просто используйте Style = Table-Layout: исправлен; Конечно, указания, указанные выше, могут быть определены в CSS, например,
| стол { Table-Layout: исправлен; Word-wrap: слов-слова; } |
4. Используйте CSS для управления адаптивным размером картин, код следующим образом:
| img { максимальная ширина: 600px; Ширина: выражение (this.width> 600? 600px: this.width); переполнение: скрыто; } |
Среди них максимальная ширина: 600px; В других браузерах, не являющихся нет, таких как IE7 и Firefox, максимальная ширина составляет 600 пикселей, но она недействительна в IE6; Ширина: 600px; Во всех браузерах размер изображения составляет 600px. Когда размер изображения превышает 600px, он автоматически уменьшится до 600px, что действителен в IE6; и переполнение: скрыто; Относится к сокрытию детали за пределами установленного размера, чтобы избежать деформации таблицы из -за неспособности управлять размером изображения. 2 страницы в общей сложности предыдущей страницы 12 Следующая страница