題名の通りWordpressで記事をfloatで並べたときに空白が開いてしまったのですが、どうすることもできなかったのでどうすればいいか教えてください。
画像でお見せするのは難しかったので、自分のサイトのリンクを張るのはお恥ずかしいのですが、まずはこちらをご覧ください。
http://kelvin-blog.net/
上から3つ目の左側の記事が空白になり下にずれてしまっています。
そのせいで、1ページに8つ表示する設定にしているのですが下に一つずれてしまっていて困っています。
申し訳ありませんが、よろしくお願いします。
一応、コード乗せときます。
css
1/* 2テーマの説明が書いてあります。 3*/ 4 5*, *:before, *:after { 6 -webkit-box-sizing: border-box; 7 -moz-box-sizing: border-box; 8 -o-box-sizing: border-box; 9 -ms-box-sizing: border-box; 10 box-sizing: border-box; 11} 12html{ 13 14} 15 16 body{ 17 color: #333; 18 font-family: メイリオ,Arial, Helvetica, sans-serif; 19 font-size: 16px; 20 } 21 22 header{ 23 text-align: center; 24 font-family: impact; 25 } 26 27 #header-title{ 28 border-bottom: 1px solid #aaa; 29 margin: 0 10px; 30 padding: 5px 0; 31 } 32 #header-title a{ 33 color: #333; 34 font-size: 50px; 35 } 36 #header-title a:hover{ 37 text-decoration: none; 38 } 39 40 .menu{ 41 margin: 0 10px; 42 font-family: メイリオ,Arial, Helvetica, sans-serif; 43 border-bottom: 1px solid #aaa; 44 } 45 .menu li{ 46 display: inline-block; 47 font-size: 18px; 48 font-weight: bold; 49 border-right: 1px solid #aaa; 50 margin: 2px 0; 51 } 52 .menu li:first-child{ 53 border-left: 1px solid #aaa; 54 } 55 .menu li a{ 56 color: #aaa; 57 padding: 0 10px; 58 } 59 .menu li a:hover{ 60 text-decoration: none; 61 color: #333; 62 } 63 64 main{ 65 margin: 10px auto; 66 overflow: hidden; 67 } 68 69 #contents{ 70 float: left; 71 border-right: 1px solid #aaa; 72 padding: 0 10px; 73 } 74 75 #contents > a:hover{ 76 text-decoration: none; 77 } 78 79 .post{ 80 float: left; 81 padding: 0 10px; 82 margin: 10px 0; 83 width: 50%; 84 } 85 86 nav{ 87 font-size: 20px; 88 } 89 90 #prev{ 91 float: left; 92 clear: both; 93 } 94 95 #next{ 96 float: right; 97 clear: both; 98 } 99 100 #sidebar{ 101 float: right; 102 } 103 104 .widget{ 105 margin: 10px 0; 106 text-align: center; 107 } 108 109 .side-title{ 110 font-size: 25px; 111 font-weight: bold; 112 } 113 114 footer{ 115 clear: both; 116 color: #aaa; 117 border-top: 1px solid #aaa; 118 text-align: center; 119 margin: 10px 10px 0; 120 padding: 5px 0; 121 } 122 123/* レスポンシブ デザイン */ 124main{ 125 width: 1280px; 126} 127 128 #contents{ 129 width: 880px; 130 } 131 132 #sidebar{ 133 width: 390px; 134 } 135 136@media all and (max-width: 1280px){ 137 main{ 138 width: 1024px; 139 } 140 141 #contents{ 142 width: 700px; 143 } 144 145 #sidebar{ 146 width: 314px; 147 } 148} 149 150@media all and (max-width: 1024px){ 151 main{ 152 width: 768px; 153 } 154 155 #contents{ 156 width: 500px; 157 } 158 159 #sidebar{ 160 width: 258px; 161 } 162} 163 164@media all and (max-width: 768px){ 165 body{ 166 font-size: 14px; 167 } 168 169 #header-title{ 170 font-size: 32px; 171 padding: 0; 172 } 173 174 .menu li{ 175 font-size: 16px; 176 } 177 178 main{ 179 width: 320px; 180 } 181 182 #contents{ 183 float: none; 184 width: 320px; 185 border: none; 186 } 187 188 .post{ 189 float: none; 190 width: 100%; 191 } 192 193 #sidebar{ 194 float: none; 195 clear: both; 196 width: 320px; 197 } 198}
2つにCSSを分けているのでもう一つ置いときます。
css
1*{ 2 word-wrap: break-word; 3} 4 5a{ 6 color: #03c; 7 text-decoration: none; 8} 9 a:hover{ 10 text-decoration: underline; 11 } 12 13 a .post *{ 14 color: #333; 15 } 16 17p{ 18 line-height: 1.7em; 19 margin: 10px 0; 20 padding: 0 10px; 21} 22 23b{ 24 font-weight: bold; 25} 26 27strong{ 28 background-color: #ffa500; 29} 30 31img{ 32 width: 100%; 33 height: auto; 34} 35 36h1{ 37 font-size: 32px; 38 font-weight: bold; 39 text-align: center; 40 margin: 10px 0; 41} 42 h1 a{ 43 color: #333; 44 } 45 h1 a:hover{ 46 text-decoration: none; 47 } 48 49h2,h3,h4{ 50 font-weight: bold; 51 margin: 10px 0; 52 padding: 0 10px; 53} 54 55h2{ 56 font-size: 25px; 57 border-bottom: 1px solid #333; 58} 59 60h3{ 61 font-size: 20px; 62 border-bottom: 1px dotted #333; 63} 64 65h4{ 66 font-size: 20px; 67}
長々と書いて申し訳ありませんがよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/26 03:31
2016/09/26 03:37