HTML / CSS在我的Rails 4应用中表现得很奇怪（高度不可自定义，等等）

Question

I have two questions with this post. The first is why does the Toyota Camry act like that?

Here's the code:

#posts
    - @posts.each do |post|
        .post
            .post_content
                .title
                    %h2
                        = link_to truncate((post.title), length: 25), post
                %p
                    $
                    = post.price
                .post_image
                    = link_to image_tag(post.image.url), post
                .data.clearfix
                    %p.username
                        Listing by
                        = post.user.name
                    %p.buttons
                        %span
                            %i.fa.fa-comments-o
                            = post.inquiries.count
                        %span
                            %i.fa.fa-thumbs-o-up
                            = post.get_likes.size

The CSS:

#posts {
    .post {
        width: 20%;
        float: right;
        margin: 1rem 1.5%;
        border: 1px solid #E4E4E4;
        /*height: auto;*/
        .post_image {
            height: auto;
            overflow: hidden;
            img {
                width: 100%;
                border-radius: .3rem .3rem 0 0;
            }
        }
        .post_content {
            margin: 1rem;
            h2 {
                margin: 0;
                font-weight: 100;
                padding: 1rem 5%;
                border-bottom: 1px solid #E4E4E4;
                font-size: 1.5rem;
                a {
                    text-decoration: none;
                    /*color: #333233;*/
                    &:hover {
                        color: #6E58E0;
                    }
                }
            }
            .data {
                padding: .75rem 5%;
                color: #969696;
                .username, .buttons {
                    margin: 0;
                    font-size: 1rem;
                }
                .username {
                    float: left;
                }
                .buttons {
                    float: right;
                    span {
                        margin-left: .5rem;
                    }
                }
            }
        }
    }
}

I think that's everything that's working on the page, but if I'm missing something please let me know.

I've been having a lot of problems with it, trying every way I know how to fix it.

I also didn't have much success in making the individual post element the same width and height, evenly. This is the second part to this question. I'm trying to get the title, image, etc to be evenly throughout each post.

Any help is appreciated as always. Thanks

EDIT: I'm not quite sure what you mean by rendered HTML but is this it

Additionally, the same CSS and HTML applied to another part of the page works correctly

Answer 1

尝试将以下行添加到“ #posts .post” CSS中

box-sizing: border-box;