How to display inline with rails?

Question

I would like to know how I can display my Post "inline" I'm begining on css, and I don't know where do I have to put the code display:inline on my css sheet. I'd try post, main_content, body, but it's not working. Can you explain me how to doo it, I follow a lot of tuto and the result it's never the same for me, so I don't understand how to do it .

my actual post display :

My code : Index post view :

<div class="transitions-enabled" id="post">

<%- @posts.each do |post|%>

  <div class="row">

      <div class="post">


        <div class="panel-body">
          <div class="form-group text-center">
            <h3> <%=post.title%></h3>
          </div>
        </div> 

        <div class="box panel panel-default">
          <div class="image_wrapper">
             <%= link_to (image_tag post.image.url(:medium), class: 'img-responsive'), post_path(post)%>
          </div>
        </div>

        <div class="panel-body">
          <div class="form-group text-center">
            <p><%= post.prix %></p>
          </div> 
        </div> 


    </div>
  </div> 

<%end%>
</div>

& my application css :

@import "bootstrap-sprockets";
@import "bootstrap";

@mixin box-shadow {
  -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
  box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
}

$red: #DB6161;

body {
  background: rgb(235, 238, 243);
}

.main_content {
  padding: 0 0 50px 0;

}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  @include box-shadow;
  background: white;
  font-weight: bold;
}


.navbar {
  margin-bottom: 50px;
  @include box-shadow;
  border: none;
  .navbar-brand {
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 25px;
    a {
      color: $red;
    }
  }
}

.post {
  background: white;
  border-radius: 5px;
  margin-bottom: 40px;
  @include box-shadow;
  float: left;


  .image_wrapper {
    width: 400px;
    height: 300px;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
  }
  img {
    width: 100%;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    &:hover {
      transform: scale(1.075);
    }
  .panel-body {
    padding: 35px;
    h1 {
      margin: 0 0 10px 0;
    }
    .description {
      color: #868686;
      line-height: 1.75;
      margin: 0;
    }
  }
  }
  h2 {
    padding: 15px 5%;
    margin: 0;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.5;
    a {
      color: $red;
    }
  }
}

#post_top {
  margin-bottom: 50px;
}

#post_info, #ingredients, #directions {
  background: white;
  @include box-shadow;
  min-height: 360px;
  border-radius: 5px;
  padding: 2em 8%;
}

.post_image {
  max-width: 100%;
  border-radius: 5px;
  @include box-shadow;
}

#post_info {
  h1 {
    font-size: 36px;
    font-weight: normal;
    color: $red;
  }
  .description {
    color: #8A8A8A;
    font-size: 20px;
  }
}

#ingredients, #directions {
  margin-bottom: 50px;
  ul, ol {
    padding-left: 18px;
    li {
      padding: 1em 0;
      border-bottom: 1px solid #EAEAEA;
    }
  }
}

.form-inline {
  margin-top: 15px;
}
.form-input {
  width: 65% !important;
  float: left;
}
.form-button {
  float: left;
  width: 30% !important;
  margin-left: 5%;
}
.add-button {
  margin-top: 25px;
}

Answer 1

Besides CSS style, the problem you have is you've added a row class surrounding every post.

Say you want to display three posts in each row, do it like this:

<%- @posts.each_slice(3) do |posts| %>
  <div class="row">
    <%- posts.each do |post|
      ...
    <% end %>
  </div>
<% end %>

Update: just realized original code example was not showing although this has been marked as answer. Updated to show the example.

Or just move .row div outside our each block, which puts all posts inside a single .row.

Answer 2

As you are using bootstrap, use columns:

<div class="transitions-enabled" id="post">
    <div class="row">    
        <%- @posts.each do |post|%>   
            <div class="col-md-4 post">  
                <!-- post content -->   
            </div>
        <% end %>
    </div>     
</div>

You'll find the different column types here.

giving your post a .col-md-4 class will make them appear aligned by three:

4-4-4
4-4-4

summing each row to 12.

You should also remove the float styling in your css and move the .row outside of your iteration, as bootstrap takes care of that for you.

Answer 3

You should try adding it to panel-body.

Also have a look (not now, but in the future when you are using more then 3 blocks) at http://masonry.desandro.com/ for continuous tiled divs.