Question

我有一个网站，其中有一个高级搜索（红色框），然后显示用户配置文件（白色框）。我希望它看起来像这样：

专用于搜索的一列和专用于用户配置文件的三列。我现在拥有的是：

我的代码：

    <div class="container">
    <div class="row">
        <div class="col s12 m6 l3">
            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content center">
                        <div style="margin-top: -20px; width: 113%; height: 40px; background-color: #0288d1;margin-left: -21px;">
                        <span class="card-title2">Advanced search</span>
                        </div>
                        <%= simple_form_for @search do |s| %>
                            SEARCH FORM GOES HERE
                        <% end %>
                    </div>
                </div>
            </div>
        </div>
    <% @userinfors.each do |user| %>
        <% if user.videos.present? && user.resumes.present? && user.othervideos.present? && user.workpaces.present? && user.sandws.present? %>
            <div class="col s12 m6 l9">
                <div class="col s12 m6 l4">
                    <div class="card white">
                        <div class="card-content center">
                            USER PROFIL GOES HERE                         
                        </div>
                    </div>
                </div>  
            </div>            
        <% end %>
    <% end %>
    </div>
</div>

任何帮助都是有用的！ 我是新来的，所以请不要贬低，只要告诉我出了什么问题

Answer 1

试试这个：

<div class="container">
    <div class="row">
        <div class="col s12 m6 l3">

            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content center">
                        <div style="margin-top: -20px; width: 113%; height: 40px; background-color: #0288d1;margin-left: -21px;">
                        <span class="card-title2">Advanced search</span>
                        </div>
                        <%= simple_form_for @search do |s| %>
                            SEARCH FORM GOES HERE
                        <% end %>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6 l9">
           <% @userinfors.each do |user| %>
              <% if user.videos.present? && user.resumes.present? && user.othervideos.present? && user.workpaces.present? && user.sandws.present? %>
                <div class="col s12 m6 l4">
                    <div class="card white">
                        <div class="card-content center">
                            USER PROFIL GOES HERE                         
                        </div>
                    </div>
                </div>  
              <% end %>
           <% end %>
        </div>            
    </div>
</div>

IT看起来像这样。 https://jsfiddle.net/0sLae9sn/

CSS中的列无法正常工作

1 个答案: