で改行させない方法

Question

下記のサイトを見てページを作ってるのですが、どうしても

ごとに改行されてしまいます。ほぼコピペしただけなのですが、デモページではきちんと改行されずに表示されていますよね。どうして改行されてしまうのでしょうか。対処法があれば教えていただけると助かります。当方ど初心者ですので一番わかりやすいのをお願いします(＞人＜;) http://coliss.com/articles/build-websites/operation/css/css-only-pinterest-style-by-kushagra.html

ORUKA1951 · Accepted Answer

質問がどの部分を指しているのか意味が分かりませんが、divはブック要素ですから、

スタイルシートで変更しない限り『ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』はずです。
　スタイルシートで、displayの値を、inline、inline-blockなどに指定しない限り、ブラウザのもつデフォルトのスタイルで整形されます。

★老婆心ながら、この手のサイト、余りはまらないほうが良いですよ。
　CSS3のcolumnを使ったレイアウトの説明ですが、1999年に勧告されたHTML4.01以来の「文書構造とプレゼンテーションの分離」が全くされていません。
DIVは『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
ですし、HTML5では、『Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )---著者は、他に適当な要素がないときの最後の手段としてdiv要素を使用することを強く推奨する』言い換えれば原則DIVは使いません。
　デザインのためにHTMLを書いてはならない!!!という原則を外れています。

★culumnは、単純に「段組」のための仕組みですから、単純にその要素をinline-blockにして整形すればよいだけです。
HTML5的に書くと
<body>
　<header>
　</header>
　<section>
　　<ul>
　　　<li><img src="" width="" height="" alt="">
　　　　　<p>説明</p>
　　　</li>
・・・・という形にHTML4.01でしたら
<body>
　<div class="header">
　</div>
　<div class="section">
　　<ul>
　　　<li><img src="" width="" height="" alt="">
　　　　　<p>説明</p>
　　　</li>
になります。
それを単純に（細部を省くと）
　section ul,section ul li{list-style:none;margin:0;padding:0;}
　section ul{column-count: 3;}
　section ul li{display:inline-block;}
ないし、
　div.section ul,div.section ul li{list-style:none;margin:0;padding:0;}
　div.section ul{column-count: 3;}
　div.section ul li{display:inline-block;}
にすればよい。
　そしてこれは印刷には向かないので、印刷用は
　section ul,section ul li{list-style:none;margin:0;padding:0;}
とか・・
　もちろん検索エンジンには素のHTMLとして画像リストとして理解させることになります。

　　　　　
説明

　　　　　
説明

taloo · Answer

デモページのどの部分を見て

の改行と判断されてますか？

1

2

3

4

5

6

というHTMLドキュメントがあるとして、（別に

でも

でも何でも良いです。）参考サイトの用にcolumnを使用してレイアウトすると、 1 4 2 5 3 6 という順番で表示されます。 floatを使用すると、 1 2 3 4 5 6 という順番で表示されます。もし表示順を考慮する必要があるのなら、 floatとcolumnに互換性はありませんので、各オブジェクトの高さが違うからcolumnを使えばよいという物ではありません。デザインにあわせてCSSを書いてみてください。

barusu0126 · Answer

--------------------------------------------------------

box1

box2

box3

box4

-------------------------------------------------------- ↑これで横並びに設置できます。「flort:left;」で横に配置し、上のstyle部分で横並びを解除してます。解除しないと延々横に配置されます。

<div>で改行させない方法

質問がどの部分を指しているのか意味が分かりませんが、divはブック要素ですから、

デモページのどの部分を見て<div>の改行と判断されてますか？

--------------------------------------------------------

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング