作者TheSandman (睡魔山德曼)
看板Blog
標題[痞客] Ccs 瀑布流語法求助
時間Mon Jun 5 23:22:28 2017
這幾天為了紀錄生活開始經營部落格，選定了某瀑布流樣板來套用，很喜歡這種圖片整合的方式，不夠他的閱覽順序是上至下再左到右：
1 4
2 5
3 6
我希望可以改成先左至右，再上至下
1 2
3 4
5 6
研究了好幾天語法都失敗，能幫幫我嗎？目前語法：/* ---------------------------------------------------------------瀑布流--------------------------------
#calendar .cal-forward a,
#calendar .cal-backward a {
color: #1db954; }
#calendar table {
width: 100%;
height: 180px; }
#calendar th,
#calendar td {
text-align: center;
padding: 1px; }
#calendar td a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
background: #1db954;
color: #ffffff;
display: block; }
/* ---------------------------------------------------------------footer---------------------------------------------------------------*/
#footer #bottom:before {
display: block;
margin: 39px auto;
color: #1db954;
content: "Copyright c CSS designed by BlueHorace"; }
font-size: 13
/* --------------------------------------------------------------- 首頁瀑布流---------------------------------------------------------------*/
#blog-main .article-body {
color: #666;
font-size: 14px;
letter-spacing: 2px; }
#blog-main .article-content-inner p:first-child img {
max-width: 400px;
margin-top: -94px;
height: auto; }
@-moz-document url-prefix() {
@-moz-document url-prefix() {
#blog-main .article-content-inner p:first-child img {
margin-top: -95px; } }
#blog-main .article-content-inner img {
max-width: 400px;
margin-left: -20px;
height: auto; }
#blog-main .article {
background: #fff;
width: 400px;
display: inline-block;
box-sizing: border-box;
margin: 0px 0px 30px 0;
line-height: 1.5em;
letter-spacing: 1pt;
-moz-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 4px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 4px; }
#blog-main .article-content p {
padding: 0 20px; }
#article-main
#trackback-url {
text-align: center;
text-align: center;
margin: 22px 0 10px 0; }
#article-main
#trackback-input {
width: 580px;
margin: 0 5px 0 0; }
#article-main .article-body {
font-size: 15px;
color: #333; }
#article-main .recommended-posts3 {
margin: 20px 20px !important; }
#article-main .recommended-posts3 a {
color: #1db954;
border-left: none !important; }
#article-main .recommended-posts3 h5 {
font-size: 15px !important;
font-weight: 900 !important;
color: #333 !important;
opacity: 1 !important; }
#article-main .author {
margin: 0px 20px 20px 0px;
text-align: right; }
#article-main
#comment-area {
width: 100% !important;
width: 100% !important;
background: none !important;
border: none !important; }
#article-main
#comment-area-2 {
width: 100% !important;
background: none !important;
border: none !important; }
#article-main .comment-identity.identity-logout {
background: none !important; }
#article-main .comment-body {
border: none !important; }
#article-main .comment-identity.identity-logout {
border: none !important; }
#article-main .comment-identity.identity-login {
background: none !important;
border: none !important; }
#article-main
#container #main #content
#user-post #comment-box .comment-body p {
margin: 0 0 8px 0;
line-height: 18px;
border-bottom: 1px dashed #ccc !important;
border-top: 1px dashed #ccc !important;
padding: 10px 0 10px 0 !important;
text-align: center; }
text-align: center; }
#article-main
#container #main #content
#user-post #comment-box input.comment-name {
background: #fff !important;
width: 93% !important;
line-height: 28px !important;
height: auto;
padding: 0px 10px !important; }
#article-main .comment-textarea {
width: 100% !important; }
@media screen and (min-width: 2140px) {
#blog-main #container3 {
width: 2120px; }
#blog-main #content {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px; } }
@media screen and (min-width: 1720px) and (max-width: 2139px) {
#blog-main #container3 {
width: 1700px; }
width: 1700px; }
#blog-main #content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px; } }
@media screen and (min-width: 1300px) and (max-width: 1700px) {
#blog-main #container3 {
width: 1280px; }
#blog-main #content {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px; } }
@media screen and (min-width: 860px) and (max-width: 1299px) {
#blog-main #container3 {
width: 840px; }
#blog-main #content {
-moz-column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px; } }
@media screen and (max-width: 859px) {
#blog-main .article {
overflow: hidden; }
#article-main .article {
overflow: hidden; }
#navigation {
width: 272px; }
#navigation li {
margin: 0px 5px 0px 0px; }
#topbar {
display: none; }
.topbar-placeholder {
.topbar-placeholder {
display: none; }
#footer #bottom:before {
margin: 15px auto; }
#blog-category {
top: 210px; }
#blog-main #container3 {
width: 100%; }
#blog-main .article {
width: 100%;
max-width: 400px;
margin: 0 auto 30px auto;
display: block; }
#blog-main #links {
display: none; }
#blog-main .more {
width: 100%; }
#article-main
#comment-box .single-post {
width: 77%; }
width: 77%; }
#article-main .comment-identity {
display: none !important; }
#article-main
#comment-area-2 > iframe {
display: none; }
#article-main
#trackback-input {
width: 85%; }
#article-main .comment-textarea > textarea {
width: 94% !important; }
#article-main #links {
display: none; }
#article-main
#d_clip_button {
margin-top: 15px; }
#article-main .article-content-inner img {
max-width: 100% !important;
height: auto !important; } }
@media screen and (max-width: 1300px) {
#article-main
#container3 {
width: 100%; }
#article-main #content {
padding: 10px; } }
.article-keyword {
margin-left: 17px; }
margin-left: 17px; }
.article-keyword a {
color: #1db954; }
.article-keyword img {
margin-top: 0px !important;
margin-left: 0px !important; }
#article-main .article-head {
background: none;
padding: 50px 0px; }
#article-main .publish {
text-shadow: none;
color: #333;
text-align: center; }
#article-main .title h2 a {
color: #000;
text-shadow: none;
font-size: 36px;
text-align: center;
line-height: 36px; }
#article-main .title h2 {
text-align: center;
overflow: hidden;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis; }
#article-main .author-profile {
padding: 0 20px; }
body { background-color: #e6e6e6; }
body { background-image: none; }
#links { background-color: #ffffff; }
#header { background-image: url(
https://pic.pimg.tw/ck4xup6home/1496478748-1299486262_l.jpg);; }
#header { background-position: top; }
#header { background-repeat: no-repeat; }
.publish { color: #ffffff; }
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.140.52.55
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Blog/M.1496676151.A.982.html
※ 編輯: TheSandman (223.140.52.55), 06/05/2017 23:23:26
1F：推 tools241: Google搜[痞客邦 PIXNET 面版樣式(CSS) 設定] 06/08 13:35
2F：→ tools241: Google搜[隨意窩 Xuite 面版樣式(CSS) 設定] 06/08 13:35