我希望我的帖子彼此相邻显示 Ruby on Rails

Question

我希望我的帖子彼此相邻显示，但我无法让它工作！ 我的网站如下所示：http://i.imgur.com/5QApgAz.png

我的代码是：

<div class="col-sm-6 col-md-3">
    <div class="td-container">
        <!-- content -->
        <div class="td-pb-row">
            <div class="td-pb-span8 td-main-content">
                <div class="td-ss-main-content">


                    <div class="td-block-row">

                        <div class="td-block-span6">
                            <div class="row">
                                <% @posts.each do |post| %>
                                    <div class="td_module_1 td_module_wrap td-animation-stack">
                                        <div class="td-module-image">
                                            <div class="td-module-thumb"><a href="#" rel="bookmark"><img width="324" height="160" class="entry-thumb" src="https://i.vimeocdn.com/portrait/58832_300x300" width="104" height="142"/></a></div>
                                        </div>
                                        <h2 class="title">
                                            <%= link_to post.naziv, post %>
                                        </h2>
                                        <div class="td-module-meta-info">
                                            <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-06-29T20:26:46+00:00" ><%= post.created_at.strftime("%B, %d, %Y")%></time></span> </div>
                                    </div>
                                    <% end %>
                            </div>
                        </div>
                    </div>
                    <!-- /.td-container -->
                </div>
            </div>
        </div>
    </div>
</div>

我正在尝试这样做：

<div class="row">
  <% @movies.each do |movie| %>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <h1><%= link_to post.title, post %></h1>
      </div>
    </div>
  <% end %>
</div>

任何帮助将不胜感激！

Answer 1

您可以为此使用 flexbox：

.td-block-row {
  display: flex;
  justify-content: space-between;
}

<div class="col-sm-6 col-md-3">
  <div class="td-container">
    <!-- content -->
    <div class="td-pb-row">
      <div class="td-pb-span8 td-main-content">
        <div class="td-ss-main-content">
          <div class="td-block-row">
            <div class="td-block-span6">
              <div class="row">
                <div class="td_module_1 td_module_wrap td-animation-stack">
                  <div class="td-module-image">
                    <div class="td-module-thumb">
                      <a href="#" rel="bookmark"><img width="324" height="160" class="entry-thumb" src="https://i.vimeocdn.com/portrait/58832_300x300" width="104" height="142" /></a>
                    </div>
                  </div>
                  <h2 class="title">
                    Title
                  </h2>
                  <div class="td-module-meta-info">
                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-06-29T20:26:46+00:00" ></time></span> </div>
                </div>
              </div>
            </div>
            <div class="td-block-span6">
              <div class="row">
                <div class="td_module_1 td_module_wrap td-animation-stack">
                  <div class="td-module-image">
                    <div class="td-module-thumb">
                      <a href="#" rel="bookmark"><img width="324" height="160" class="entry-thumb" src="https://i.vimeocdn.com/portrait/58832_300x300" width="104" height="142" /></a>
                    </div>
                  </div>
                  <h2 class="title">
                    Title
                  </h2>
                  <div class="td-module-meta-info">
                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-06-29T20:26:46+00:00" ></time></span> </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /.td-container -->
        </div>
      </div>
    </div>
  </div>
</div>