HTML/CSS 在我的 Rails 4 应用程序中表现得很奇怪（高度不可定制等）答案

【问题标题】：HTML/CSS acting very weird in my Rails 4 app (height not customizable etc)HTML/CSS 在我的 Rails 4 应用程序中表现得很奇怪（高度不可定制等）
【发布时间】：2015-08-16 16:24:43
【问题描述】：

我对这篇文章有两个问题。首先是为什么丰田凯美瑞会这样？

代码如下：

#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

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;
                    }
                }
            }
        }
    }
}

我认为这就是页面上的所有功能，但如果我遗漏了什么，请告诉我。

我遇到了很多问题，尝试了所有我知道如何解决它的方法。

在使单个帖子元素均匀地具有相同的宽度和高度方面，我也没有取得太大的成功。这是这个问题的第二部分。我试图让标题、图片等在每个帖子中均匀分布。

一如既往地感谢任何帮助。谢谢

编辑：我不太确定您所说的渲染 HTML 是什么意思，但就是这样

此外，应用于页面另一部分的相同 CSS 和 HTML 可以正常工作

【问题讨论】：

您也可以在这里发布渲染的 HTML。
"...为什么丰田凯美瑞会这样？"你在说什么？你似乎认为一个对你来说很明显的问题对其他人来说也同样明显，除了我们不是你。如果您希望得到帮助，则必须具体说明您认为自己遇到的问题。
它应该与其他帖子内联时位于底部。我尝试将其设置为每列有 4 个帖子
可以模拟出你想看到的结果吗？和@MarsAtomic 一样，我很难准确理解你想看到的内容。
我明白他想要什么。他说的是右下角的银色凯美瑞，而不是右上角的红色凯美瑞，它正在完美展示。他希望他的所有缩略图都显示在一个完美的网格中，其中每个单元格的宽度和高度都相同，并且缩略图在视觉上看起来可以按顺序添加到可用的单元格中。现在，那辆银色凯美瑞独自漂浮在一个角落里。

标签： html css ruby-on-rails ruby-on-rails-4

【解决方案1】：

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

box-sizing: border-box;

【讨论】：

那什么也没做:(
@HenryLee 如果它还活着，我想看看。