Q&A
生成されたHTMLを提示することは可能ですか？
質問を見ていただいて、ありがとうございます。
表題の通り、inline-blockを使用しているのですが、下記のようにどうしても段差ができてしまいます。
やりたいこととしては、Facebook・Instagram。twitter・google+の4つのアイコンをmax-width930pxのdiv内の中央に整列（最大でも2☓2）
させ、ブラウザの幅を縮めるとdivの中央に配置されたまま1列に4つ並ぶようにしたいです。
ソースコードは以下の通りです。
（まだCSSに分けておらずHTMLに直打ちしています。）
<!-- facebook --> <div style="max-width: 930px;margin:auto;overflow: hidden;text-align: center;"> <!-- facebookのURLが入力されていなければ表示しない --> <% if @admin.facebook_url.present? then %> <div style="display: inline-block;width: 97%;max-width: 450px;height: 500px;margin:3px; border: 2px solid blue; "> <%= link_to image_tag('/images/icon_facebook.png', {:alt => "facebook", :size => '28x28'}), @admin.facebook_url, :target=>["_blank"] %> <% @me.first(1).each do |feed| %> <% src1 = "https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fvelleglantz%2Fposts%2F" %> <!-- iframeにpage_idは不要なので削除 --> <% src2 = feed["id"].gsub!(/#{Constants::FB_PAGE_ID}_/, '') %> <% src3 = 'min-width="300" height="400" style="border:none;overflow:hidden;margin:3px; border: 2px solid blue scrolling="no" frameborder="0" allowTransparency="true"' %> <iframe style="height:100%; width: 100%; max-height: 500px; max-width: 450px;" src=<%= "#{src1}#{src2}#{src3}" %>></iframe> <% end %> </div> <% end %> <!-- Instagram --> <!-- InstagramのURLが入力されていなければ表示しない --> <% if @admin.instagrams_url.present? then %> <div style="display: inline-block;max-width: 450px;height: 500px;margin:3px; border: 2px solid blue; "> <%= link_to image_tag('/images/instagram.png', {:alt => "Instagram", :size => '28x28'}), @admin.instagrams_url, :target=>["_blank"] %><br> <% @users.first(1).each do |user| %> <% if user.images.low_resolution.url then %> <%= link_to image_tag(user.images.low_resolution.url, :class => "img- rounded" ), @admin.instagrams_url, :target=>["_blank"] %><br> <%= link_to user.caption.from.username, @admin.instagrams_url, :target=>["_blank"] %><br> <%= user.caption.text %><br> <% else %> <%= link_to user.caption.from.username, @admin.instagrams_url, :target=>["_blank"] %><br> <%= user.caption.text %> <% end %> <% end %> </div> <% end %> <!-- twitter --> <!-- twitterのURLが入力されていなければ表示しない --> <% if @admin.twitter_id.present? then %> <div style="display: inline-block;min-width: 300px;max-width: 450px;height: 500px;margin:3px; border: 2px solid blue; "> <%= link_to image_tag('/images/icon_twitter.png', {:alt => "twitter", :size => '28x28'}), @admin.twitter_id, :target=>["_blank"] %> <% @client.home_timeline.first(1).each do |tweet| %> <% if tweet.media[0] then %> <%= link_to image_tag(tweet.media[0].media_url ), @admin.twitter_id, :target=>["_blank"] %><br> <%= tweet.user.name + 'さんのツイート ： ' %><br> <%= tweet.text %><br> <% else %> <%= tweet.user.name + 'さんのツイート ： ' %><br> <%= tweet.text %> <% end %> <% end %> </div> <% end %> <!-- google+ --> <!-- google+のURLが入力されていなければ表示しない --> <% if @admin.googleplus_url.present? then %> <div style="display: inline-block;max-width: 450px;height: 500px;margin:3px; border: 2px solid blue; "> <%= link_to image_tag('/images/icon_googleplus.png', {:alt => "googleplus", :size => '28x28'}), @admin.googleplus_url, :target=>["_blank"] %> <% @google.items.first(1).each do |item| %> <% if item.object.attachments[0] then %> <% @link = item.url %> <% @name = item.actor.displayName %> <% @coment = item.title %> <% picture1 = item.object.attachments[0] %> <% picture2 = picture1.image %> <% if picture2 then %> <%= link_to image_tag(picture2.url), @link, :target=>["_blank"] %><br> <%= link_to @name, @link, :target=>["_blank"] %><br> <%= @coment %><br></div> <% else %> <%= link_to @name, @link, :target=>["_blank"] %><br> <%= @coment %><br> <% end %> <% else %> <%= link_to @name, @link, :target=>["_blank"] %><br> <%= @coment %> <% end %> <% end %> </div> <% end %> <clear="both"> </div>
###試したこと
float_leftも試してみたのですが、ブラウザが半端な幅だと左に寄ってしまうので、inline-blockで何とかしようとしています。
if内のdivをifの外に出してみたり、divではなくul・liを使ってみたり、一番最初のdivに「font-size:0px」を足して、if内のdivに「font-size:16px」を足してみたりしたのですが、状況が変わりません。
説明が分かりにくいかもしれませんが、よろしくお願いします。
追記：生成されたHTMLは下記の通りです。
生成されたHTMLの画像を追加しました。
HTMLは画像ではなく、ソースをそのまま貼り付けられませんか？
vertical-align: top;を当てることで解決しました。
気にかけてくれてありがとうございました。
回答3件
0
ベストアンサー
display: inline-block; のスタイルを当てている各divに、
css
1vertical-align: top;
を当ててみてはいかがでしょうか。
投稿2016/05/09 06:21
総合スコア85
0
はじめまして。
Rubyについては明るくない為、HTML/CSS側から回答させて頂きます。
m6uさんも仰っていますが、
まず、今回の様にinline-blockでの整列が上手くいかない理由は、
それぞれの項目の間に、余分なスペースや改行がある為です。
例えば、質問にあるコードの以下の部分
HTML
1 </div> 2 <% end %> 3 4<!-- Instagram --> 5<!-- InstagramのURLが入力されていなければ表示しない --> 6 <% if @admin.instagrams_url.present? then %> 7 <div style="display: inline-block;max-width: 450px;height: 500px;margin:3px; border: 2px solid blue;">
1行目でFacebook部分のdivが終わり、7行目でInstagramのdivが始まっています。
極端な例ですが、これを以下の様にしてみてください。
HTML
1 </div><% end %><!-- Instagram --><!-- InstagramのURLが入力されていなければ表示しない --><% if @admin.instagrams_url.present? then %><div style="display: inline-block;max-width: 450px;height: 500px;margin:3px; border: 2px solid blue;">
すると綺麗に整列する事ができると思います。
噛み砕いて説明すると、inline-blockを指定する事で、その要素は一番外側のdivの様な「ブロックレベル要素」とは異なる「インライン要素」という物になります。ブラウザでは「ブロックレベル要素」同士の間にある余白は無視されますが、「インライン要素」同士の間にある余白はなるべく出力する仕様となっています。
その為、</div>の直後の改行やタブ等を出力しようとしてしまい、ズレてしまうのです。
ただ、コードを拝見した所、例えば初めのFacebook部分のwidth:97%;の様な
(恐らく)不要となってしまっているCSSが含まれている様です。
一旦それらを整理して
HTML
1<div style="max-width: 930px;margin:auto;text-align: center;"> 2 3 <div style="display:inline-block; max-width:450px; min-width:300px; height:500px;"> 4 <!-- Facebook --> 5 </div><div style="display:inline-block; max-width:450px; min-width:300px; height:500px;"> 6 <!-- Instagram --> 7 </div><div style="display:inline-block; max-width:450px; min-width:300px; height:500px;"> 8 <!-- Twitter --> 9 </div><div style="display:inline-block; max-width:450px; min-width:300px; height:500px;"> 10 <!-- Google+ --> 11 </div> 12 13</div>
以上の様なシンプルなHTMLで予定通り表示されている事を確認されてから、
Rubyタグを追記していくと、原因の切り分けも出来てスムーズかもしれません。
また、少し横道に外れますが、CSS3では「flex-box」といった、
今回の様なレイアウトを実装する為のプロパティが用意されています。
昔のブラウザでは使う事ができないのですが、興味がありましたら調べて頂くと参考になると思います。
投稿2016/05/09 07:04
総合スコア236
ご回答ありがとうございます。
</div>～<% if・・・>を一行にまとめても同様の状態になっていました。
Facebook部分のwidth:97%;は削除するとブラウザを全画面にしてもwidthが200px程度になり、見た目が悪かったので苦肉の策でした。
「「ブロックレベル要素」同士の間にある余白は無視されますが、「インライン要素」同士の間にある余白はなるべく出力する仕様」や「flex-box」は非常に勉強になりました。
ありがとうございました。
0
HTMLとRuby（on Rails？）を行き来するために各行ごとに<%～%>を打っているようですが、
必要最小限に減らしてみてください。
出力結果のHTMLソースで、div要素の内側に不要な空白(や改行)があることによって
段差が生まれているものと思われます。
投稿2016/05/09 05:43
退会済みユーザー
総合スコア0
各項目の不要な空白や改行・コメントなどを削ったのですが、状況は変わりませんでした。
<%～%>はRuby on Railsで必要最小限まで減らしているので、削除ができません。
そうなると、また別の方法を考えたほうが良いでしょうか？
場面によっては2～3行まとまったrubyコードがあるので、そういうところを一括りにするという意味です。まだまだいけます。
それと、div要素の内側にふつうにbr要素があるとそこで崩れてしまうため、br要素を除去するコードを追加しましょう。
ご回答ありがとうございます。
まだ削れそうなところを再度調べて試してみます。
あなたの回答
tips
プレビュー
