CSS中的列不起作用

-1

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

一列专用于搜索，三列专用于用户配置文件。我现在有做这个的：

我的代码：

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

任何帮助appreicated！ 我是新来的，所以请不要downvote，只是告诉我，什么是错的

来源

2017-08-01 LizzyTheLearner

试试这个：

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

它看起来是这样的。 https://jsfiddle.net/0sLae9sn/

来源

2017-08-01 05:35:43

CSS中的列不起作用

回答

相关问题