Q&A
出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。
cssで中央寄せがしたいのですが、コンテンツが下方に行くに従って、
少しずつ右にずれてしまいます。
初歩的な質問で申し訳ございません。
よろしくお願いします。
index.css.scss
div#contents { width: 600px; margin:0 auto; padding: 10px 5px; border-top:1px solid #CCC; border-bottom:1px solid #CCC; margin-top: -1px; } .left { float: left; margin-right: 10px; } .leftclear { clear: both; }
index.html.erb
<% @title = 'top_page' %> <% @co_members.each do |co_member| %> <div id="contents"> <div class="left"> <%= image_tag co_member.photo.url(:thumb), width: 200 %> </div> <p><%= co_member.company_name %></p> <p><%= co_member.title %></p> <p><%= truncate(co_member.body, length: 80) %> <%= link_to "read more", "" %></p> <br class="leftclear"> <% end %> </div>
ページのソース
<!DOCTYPE html> <html> <head> <title>top_page - xxx</title> <link data-turbolinks-track="true" href="/assets/shared/errors.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/co/flash.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/co/form.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/co/index.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/co/layout.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/co/sessions.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/co/tables.css?body=1" media="all" rel="stylesheet" /> <link data-turbolinks-track="true" href="/assets/co.css?body=1" media="all" rel="stylesheet" /> <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> <meta content="authenticity_token" name="csrf-param" /> <meta content="AiD0APbgxCgicYRF6sIDFSRyL0z/ozQ4TBX2x4prvxg=" name="csrf-token" /> </head> <body> <div id="wrapper"> <header> <div id="a"> <a href="/"><img alt="xxx" height="80" src="/assets/xxx.png" width="280" /></a> </div> <div id="b"> <a data-method="delete" href="/session" rel="nofollow">ログアウト</a> : <a href="/account">アカウント</a> </div> </header> <div id="container"> <div id="contents"> <div class="left"> <img alt="Export84211520 60" src="/system/co_members/photos/000/000/018/thumb/export84211520-60.JPG?1475508038" width="200" /> </div> <p>a</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>a-topaz</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>apple - 2</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="P2" src="/system/co_members/photos/000/000/002/thumb/p2.jpg?1475507919" width="200" /> </div> <p>azzzz</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Dj tiesto wallpaper by for as" src="/system/co_members/photos/000/000/007/thumb/dj_Tiesto_wallpaper_by_For_as.png?1475508145" width="200" /> </div> <p>b</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>b</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>b</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>b</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>bbq</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>c</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>c</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>c</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>c</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>c</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>d</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>d</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>d</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>d</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>d</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Paul 2" src="/system/co_members/photos/000/000/001/thumb/Paul_2.jpg?1475413861" width="200" /> </div> <p>topaz</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> <div class="left"> <img alt="Missing" src="/photos/thumb/missing.png" width="200" /> </div> <p>キリ</p> <p>test</p> <p>blah, blah, blah...... <a href="">read more</a></p> <br class="leftclear"> </div> </div> <footer> <p>Powered by tt © 2017</p> </footer> </div> </body> </html>
回答1件
0
ベストアンサー
どの部分をループさせたいのか不明ですが、ループさせる位置が違うのではないかと思います。
</div>の数が合わなくなってずれていってますね。
投稿2016/10/05 08:53
総合スコア2722
回答ありがとうございます。
ループさせる位置を変え、中央寄せはうまくいきました。
しかし、上下ボーダーラインが消えてしまいました。
</div>の数は変えていません。
```
<div id="contents">
<% @co_members.each do |co_member| %>
<div class="left">
<%= image_tag co_member.photo.url(:thumb), width: 200 %>
</div>
<p><%= co_member.company_name %></p>
<p><%= co_member.title %></p>
<p><%= truncate(co_member.body, length: 80) %>
<%= link_to "read more", "" %></p>
<br class="leftclear">
<% end %>
</div>
```
borderは#contentsについているのでループ内にはいませんが、#contentsの上下にはいるのではないですか？？
#contentsのborderが消えたということですか？
ループ内にもほしい場合は、「.left」に「border-bottom:1px solid #CCC;」を指定し、「#contents」から「border-bottom:1px solid #CCC;」を削除すればいいと思います。
index.html.erbの最初の状態で<% end %>を一番下に持って行くと、
うまく表示させることができました。
ありがとうございました。
あなたの回答
tips
プレビュー
