考慮到多數使用者的螢幕解析度不見得都是設定成最大解析度
所以整個BLOG的寬度就只好採用預設值
但是這樣文章區的圖片就只能顯示600px,超過就會被卡掉
解決方法很簡單,就是修改CSS裡面的overflow語法
首先確定 .article-content 沒有設定overflow:hidden;
有的話可以在前後加上註解,讓設定失效。 /* .article-content{xxx} */
再來找到#main跟#content
不管預設值有沒有overflow,一律加上overflow: visible;
這樣子超過600px的圖就會突破div的寬度限制
同時也不會破壞整個結構
範例:http://matmoki.pixnet.net/blog/post/27549294
備註:盡量把大圖加在文章的尾巴,不然會蓋到右邊
// 延伸資訊 //
http://www.hsiu28.net/style/style_11.php
http://subocheng.blogspot.com/2007/11/div-overflow-width-100.html
MatMoki 發表在 痞客邦 留言(1) 人氣()
Create CSS Curly Quotes Without Images
http://www.nealgrosskopf.com/tech/thread.php?pid=21
http://www.flickr.com/photos/intervisual/966351488/
blockquote
{
margin: 2em 0px;
padding-left: 40px;
padding-right: 80px;
}
blockquote:before
{
color: #990000;
content: '\201C'; /* http://monc.se/kitchen/129/rendering-quotes-with-css */
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
}
blockquote:after
{
color: #990000;
content: '\201D'; /* http://monc.se/kitchen/129/rendering-quotes-with-css */
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px 500px;
vertical-align: bottom;
}
橘色部分為我自行新增部分
MatMoki 發表在 痞客邦 留言(0) 人氣()
MatMoki 發表在 痞客邦 留言(0) 人氣()
MatMoki 發表在 痞客邦 留言(0) 人氣()
MatMoki 發表在 痞客邦 留言(0) 人氣()
MatMoki 發表在 痞客邦 留言(0) 人氣()