質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2013閲覧

Wordpressでのfloatで並べた記事の空白について

Kelvin

総合スコア34

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/26 03:15

題名の通り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}

長々と書いて申し訳ありませんがよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

floatで複数行の横並びボックスレイアウトを作る場合、
隣同士で並んでいるボックスの高さを揃えてやらないと、今のようにカラムがおかしくなります。
しかしfloatでレイアウトした場合、隣同士に並んだボックスの高さを自動的に揃えることは仕様上できません。

そこで、このようなケースの場合にはボックスの高さを揃えるJavaScriptを利用するのが定石です。
jquery.matchHeight.jsなどの導入を検討してみてください。
(※使い方は検索すれば日本語の解説記事がたくさん出てきます)

他には、floatでレイアウトすることをやめて他の手段を検討するのもあります。
古い環境に対応する必要がなければflexboxが一番簡単です。
(具体的な使い方は検索してください)

投稿2016/09/26 03:29

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kelvin

2016/09/26 03:31

早いお返事ありがとうございます! flexboxですか。 JavaScriptはあまり使いたくないのでflexboxを検討してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問