要素は何の理由もなく互いに重なっていますか？

Question

なんらかの理由でdivが重複します。divがあります。したがって、私のアンカーリンクは機能しません。私はインスペクタを使いましたが、いくつかのIDは上記のIDのスペースを取っているようです。例えば、#meatsには#startersが続きます。これは、新しい#starterまたは#meatが作成された場合にのみ発生します。私は本当にここで何が起こっているのか理解していただければ幸いです。

p{ 
 
     color: #454545; 
 
    } 
 
    
 
    @media screen and (min-width: 1200px) { 
 
    
 
     .nav{ 
 
     font-weight: lighter; 
 
     color: black; 
 
     } 
 
     #sticky { 
 
     // flex: 0 0 450px; 
 
     // height: 100vh; 
 
     // position: sticky !important; /* !important to override Gmaps inline CSS */ 
 
     // top: 0 !important; 
 
     } 
 
    
 
     // .card-area{ 
 
     // width: 300px; 
 
     // height: 150px 
 
     // } 
 
    
 
     .col-sm-12{ 
 
     padding: 0px; 
 
     } 
 
     .title{ 
 
     text-transform: uppercase; 
 
     margin-top: 20px; 
 
     h2{ 
 
      font-weight: lighter; 
 
      margin-bottom: 0px; 
 
     } 
 
     hr{ 
 
      margin-top: 0px; 
 
      margin-bottom: 0px; 
 
      color: #454545; 
 
     } 
 
     } 
 
    
 
     .card{ 
 
     justify: space-between; 
 
     display:flex; 
 
     height:266px; 
 
     width: 900px; 
 
     margin: 20px 0; 
 
     box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
     background-color: white 
 
     } 
 
    
 
     .card-image-area{ 
 
     background-color: white; 
 
     height: 100%; 
 
     width: 400px; 
 
     } 
 
    
 
     .card-image{ 
 
     height: 100%; 
 
     } 
 
    
 
     .card-details{ 
 
     position: relative; 
 
     width: 500px; 
 
     background-color: white; 
 
     margin: 0 20px; 
 
     h3 { 
 
      width: 100%; 
 
      text-align: center; 
 
      color: #454545; 
 
      text-shadow: none; 
 
      text-transform: capitalize; 
 
      font-weight: lighter; 
 
     } 
 
    
 
     p{ 
 
      text-shadow: none; 
 
      color: #454545; 
 
      font-size: 14px; 
 
      opacity: 0.7; 
 
      font-weight: lighter; 
 
     } 
 
     hr{ 
 
      margin-top: 0px; 
 
     } 
 
     } 
 
     .card-details .description{ 
 
     padding: 10px; 
 
     } 
 
    
 
     .card-details .price{ 
 
     // width: 100%; 
 
     // height: 100%; 
 
     // justify-content: right; 
 
     position: absolute; 
 
     right: 5px; 
 
     bottom: 5px; 
 
     color: black; 
 
     font-size: 30px; 
 
     } 
 
    
 
     .actions { 
 
     position: absolute; 
 
     bottom: 10px; 
 
     left: 0px; 
 
     } 
 
    
 
     .fa { 
 
     width: 20px; 
 
     height: auto; 
 
     font-size: 20px; 
 
     text-shadow: 0.5px 1px 0.7px rgba(0,0,0,0.3);; 
 
     } 
 
    
 
     .fa-minus-circle{ 
 
     color: #D03538; 
 
     } 
 
    
 
     .fa-minus-circle:hover { 
 
      opacity: 0.3 
 
     } 
 
    
 
     .fa-pencil{ 
 
      color: #454545; 
 
     } 
 
    
 
     .fa-pencil:hover{ 
 
      opacity: 0.3; 
 
     } 
 
    }

<div class="container-fluid"> 
 
     <div class="flex col-sm-3"> 
 
     <div class="greeting-and-menu"> 
 
      <h3>Hola <%= current_user.first_name %>!</h3> 
 
      <div id= "sticky" class="profile-sidebar"> 
 
      <%= link_to "Añadir un plato", new_dish_path, class: "btn btn-primary" %> 
 
      <ul class="nav"> 
 
       <li class="active"> 
 
       <a href="#starters"> 
 
        <p>Entrantes</p> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a href="#meats"> 
 
        <p>Carnes</p> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a href="#hunting"> 
 
        <p>Caza</p> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a href="#fishes"> 
 
        <p>Pescados</p> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a href="#classics"> 
 
        <p>Especialidades</p> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a href="#desserts"> 
 
        <p>Postres</p> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a href="#others"> 
 
        <p>Otros</p> 
 
       </a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    
 
     <div class="right-part col-sm-9"> 
 
      <div id="starters"> 
 
      <div class="title"> 
 
       <h2>Entrantes</h2> 
 
       <hr> 
 
      </div> 
 
      <% @starters.each do |starter| %> 
 
      <div class="col-sm-12"> 
 
       <div class="card"> 
 
       <div class="card-image-area"> 
 
        <% if starter.photo? %> 
 
         <% img = cl_image_path starter.photo, :width=>400, :height=>266, :crop=>"fill" %> 
 
        <% else %> 
 
         <% img = cl_image_path("nofoto_zaytwc", :width=>400, :height=>266, :crop=>"fill") %> 
 
        <% end %> 
 
        <div class="card-image img-responsive img-rounded" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(<%= img %>)"> 
 
        </div> 
 
       </div> 
 
       <div class="card-details img-rounded img-responsive"> 
 
        <h3 class="text-centre"><%= starter.name %></h3> 
 
        <hr> 
 
        <p class="description"><%= starter.description %></p> 
 
        <p class="price"><%= starter.price %> €</p> 
 
        <div class="actions"> 
 
        <%= link_to ('<i class="fa fa-minus-circle aria-hidden= "true"></i>').html_safe, dish_path(starter), method: :delete, data: { confirm: "Seguro que quieres eliminar este plato?" } %> 
 
    
 
        <%= link_to ('<i class="fa fa-pencil aria-hidden="true"></i>').html_safe, edit_dish_path(starter), method: :get %> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <% end %> 
 
      </div> 
 
      <div id="meats"> 
 
      <div class="title"> 
 
       <h2>Carnes</h2> 
 
       <hr> 
 
      </div> 
 
      <% @meats.each do |meat| %> 
 
      <div class="col-sm-12"> 
 
       <div class="card"> 
 
       <div class="card-image-area"> 
 
        <% if meat.photo? %> 
 
         <% img = cl_image_path meat.photo, :width=>400, :height=>266, :crop=>"fill" %> 
 
        <% else %> 
 
         <% img = cl_image_path("nofoto_zaytwc", :width=>400, :height=>266, :crop=>"fill") %> 
 
        <% end %> 
 
        <div class="card-image img-responsive img-rounded" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(<%= img %>)"> 
 
        </div> 
 
       </div> 
 
       <div class="card-details img-rounded img-responsive"> 
 
        <h3 class="text-centre"><%= meat.name %></h3> 
 
        <hr> 
 
        <p class="description"><%= meat.description %></p> 
 
        <p class="price"><%= meat.price %> €</p> 
 
        <div class="actions"> 
 
        <%= link_to ('<i class="fa fa-minus-circle aria-hidden="true"></i>').html_safe, dish_path(meat), method: :delete, data: { confirm: "Seguro que quieres eliminar este plato?" } %> 
 
    
 
        <%= link_to ('<i class="fa fa-pencil aria-hidden="true"></i>').html_safe, edit_dish_path(meat), method: :get %> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <% end %> 
 
      </div> 
 
      <div id="hunting"> 
 
      <div class="title"> 
 
       <h2>Caza</h2> 
 
       <hr> 
 
      </div> 
 
      <% @hunting.each do |hunt| %> 
 
      <div class="col-sm-12"> 
 
       <div class="card"> 
 
       <div class="card-image-area"> 
 
        <% if hunt.photo? %> 
 
         <% img = cl_image_path hunt.photo, :width=>400, :height=>266, :crop=>"fill" %> 
 
        <% else %> 
 
         <% img = cl_image_path("nofoto_zaytwc", :width=>400, :height=>266, :crop=>"fill") %> 
 
        <% end %> 
 
        <div class="card-image img-responsive img-rounded" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(<%= img %>)"> 
 
        </div> 
 
       </div> 
 
       <div class="card-details img-rounded img-responsive"> 
 
        <h3 class="text-centre"><%= hunt.name %></h3> 
 
        <hr> 
 
        <p class="description"><%= hunt.description %></p> 
 
        <p class="price"><%= hunt.price %> €</p> 
 
        <div class="actions"> 
 
        <%= link_to ('<i class="fa fa-minus-circle aria-hidden="true"></i>').html_safe, dish_path(hunt), method: :delete, data: { confirm: "Seguro que quieres eliminar este plato?" } %> 
 
    
 
        <%= link_to ('<i class="fa fa-pencil aria-hidden="true"></i>').html_safe, edit_dish_path(hunt), method: :get %> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <% end %> 
 
      </div> 
 
      <div id="fishes"> 
 
      <div class="title"> 
 
       <h2>Pescados</h2> 
 
       <hr> 
 
      </div> 
 
      <% @fishes.each do |fish| %> 
 
      <div class="col-sm-12"> 
 
       <div class="card"> 
 
       <div class="card-image-area"> 
 
        <% if fish.photo? %> 
 
         <% img = cl_image_path fish.photo, :width=>400, :height=>266, :crop=>"fill" %> 
 
        <% else %> 
 
         <% img = cl_image_path("nofoto_zaytwc", :width=>400, :height=>266, :crop=>"fill") %> 
 
        <% end %> 
 
        <div class="card-image img-responsive img-rounded" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(<%= img %>)"> 
 
        </div> 
 
       </div> 
 
       <div class="card-details img-rounded img-responsive"> 
 
        <h3 class="text-centre"><%= fish.name %></h3> 
 
        <hr> 
 
        <p class="description"><%= fish.description %></p> 
 
        <p class="price"><%= fish.price %> €</p> 
 
        <div class="actions"> 
 
        <%= link_to ('<i class="fa fa-minus-circle aria-hidden="true"></i>').html_safe, dish_path(fish), method: :delete, data: { confirm: "Seguro que quieres eliminar este plato?" } %> 
 
    
 
        <%= link_to ('<i class="fa fa-pencil aria-hidden="true"></i>').html_safe, edit_dish_path(fish), method: :get %> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <% end %> 
 
      </div> 
 
      <div id="classics"> 
 
      <div class="title"> 
 
       <h2>Especialidades</h2> 
 
       <hr> 
 
      </div> 
 
      <% @classics.each do |classic| %> 
 
      <div class="col-sm-12"> 
 
       <div class="card"> 
 
       <div class="card-image-area"> 
 
        <% if classic.photo? %> 
 
         <% img = cl_image_path classic.photo, :width=>400, :height=>266, :crop=>"fill" %> 
 
        <% else %> 
 
         <% img = cl_image_path("nofoto_zaytwc", :width=>400, :height=>266, :crop=>"fill") %> 
 
        <% end %> 
 
        <div class="card-image img-responsive img-rounded" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(<%= img %>)"> 
 
        </div> 
 
       </div> 
 
       <div class="card-details img-rounded img-responsive"> 
 
        <h3 class="text-centre"><%= classic.name %></h3> 
 
        <hr> 
 
        <p class="description"><%= classic.description %></p> 
 
        <p class="price"><%= classic.price %> €</p> 
 
        <div class="actions"> 
 
        <%= link_to ('<i class="fa fa-minus-circle aria-hidden="true"></i>').html_safe, dish_path(classic), method: :delete, data: { confirm: "Seguro que quieres eliminar este plato?" } %> 
 
    
 
        <%= link_to ('<i class="fa fa-pencil aria-hidden="true"></i>').html_safe, edit_dish_path(classic), method: :get %> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <% end %> 
 
      </div> 
 
      <div id="desserts"> 
 
      <div class="title"> 
 
       <h2>Postres</h2> 
 
       <hr> 
 
      </div> 
 
      <% @desserts.each do |dessert| %> 
 
      <div class="col-sm-12"> 
 
       <div class="card"> 
 
       <div class="card-image-area"> 
 
        <% if dessert.photo? %> 
 
         <% img = cl_image_path dessert.photo, :width=>400, :height=>266, :crop=>"fill" %> 
 
        <% else %> 
 
         <% img = cl_image_path("nofoto_zaytwc", :width=>400, :height=>266, :crop=>"fill") %> 
 
        <% end %> 
 
        <div class="card-image img-responsive img-rounded" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(<%= img %>)"> 
 
        </div> 
 
       </div> 
 
       <div class="card-details img-rounded img-responsive"> 
 
        <h3 class="text-centre"><%= dessert.name %></h3> 
 
        <hr> 
 
        <p class="description"><%= dessert.description %></p> 
 
        <p class="price"><%= dessert.price %> €</p> 
 
        <div class="actions"> 
 
        <%= link_to ('<i class="fa fa-minus-circle aria-hidden="true"></i>').html_safe, dish_path(dessert), method: :delete, data: { confirm: "Seguro que quieres eliminar este plato?" } %> 
 
    
 
        <%= link_to ('<i class="fa fa-pencil aria-hidden="true"></i>').html_safe, edit_dish_path(dessert), method: :get %> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <% end %> 
 
      </div> 
 
      <div id="others"> 
 
      <div class="title"> 
 
       <h2>Otros</h2> 
 
       <hr> 
 
      </div> 
 
      <% @others.each do |other| %> 
 
      <div class="col-sm-12"> 
 
       <div class="card"> 
 
       <div class="card-image-area"> 
 
        <% if other.photo? %> 
 
         <% img = cl_image_path other.photo, :width=>400, :height=>266, :crop=>"fill" %> 
 
        <% else %> 
 
         <% img = cl_image_path("nofoto_zaytwc", :width=>400, :height=>266, :crop=>"fill") %> 
 
        <% end %> 
 
        <div class="card-image img-responsive img-rounded" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url(<%= img %>)"> 
 
        </div> 
 
       </div> 
 
       <div class="card-details img-rounded img-responsive"> 
 
        <h3 class="text-centre"><%= other.name %></h3> 
 
        <hr> 
 
        <p class="description"><%= other.description %></p> 
 
        <p class="price"><%= other.price %> €</p> 
 
        <div class="actions"> 
 
        <%= link_to ('<i class="fa fa-minus-circle aria-hidden="true"></i>').html_safe, dish_path(other), method: :delete, data: { confirm: "Seguro que quieres eliminar este plato?" } %> 
 
    
 
        <%= link_to ('<i class="fa fa-pencil aria-hidden="true"></i>').html_safe, edit_dish_path(other), method: :get %> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <% end %> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

私はあなたが使用するあなたのバックエンド・コードと条件で何か問題があると思います。私は状態が正常に動作していなければ、あなたのコードをチェックしました。

<!DOCTYPE html> 
<html> 
<body> 

<style> 
p{ 
    color: #454545; 
} 

@media screen and (min-width: 1200px) { 

    .nav{ 
    font-weight: lighter; 
    color: black; 
    } 
    #sticky { 
    // flex: 0 0 450px; 
    // height: 100vh; 
    // position: sticky !important; /* !important to override Gmaps inline CSS */ 
    // top: 0 !important; 
    } 

    // .card-area{ 
    // width: 300px; 
    // height: 150px 
    // } 

    .col-sm-12{ 
    padding: 0px; 
    } 
    .title{ 
    text-transform: uppercase; 
    margin-top: 20px; 
    h2{ 
     font-weight: lighter; 
     margin-bottom: 0px; 
    } 
    hr{ 
     margin-top: 0px; 
     margin-bottom: 0px; 
     color: #454545; 
    } 
    } 

    .card{ 
    justify: space-between; 
    display:flex; 
    height:266px; 
    width: 900px; 
    margin: 20px 0; 
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    background-color: white 
    } 

    .card-image-area{ 
    background-color: white; 
    height: 100%; 
    width: 400px; 
    } 

    .card-image{ 
    height: 100%; 
    } 

    .card-details{ 
    position: relative; 
    width: 500px; 
    background-color: white; 
    margin: 0 20px; 
    h3 { 
     width: 100%; 
     text-align: center; 
     color: #454545; 
     text-shadow: none; 
     text-transform: capitalize; 
     font-weight: lighter; 
    } 

    p{ 
     text-shadow: none; 
     color: #454545; 
     font-size: 14px; 
     opacity: 0.7; 
     font-weight: lighter; 
    } 
    hr{ 
     margin-top: 0px; 
    } 
    } 
    .card-details .description{ 
    padding: 10px; 
    } 

    .card-details .price{ 
    // width: 100%; 
    // height: 100%; 
    // justify-content: right; 
    position: absolute; 
    right: 5px; 
    bottom: 5px; 
    color: black; 
    font-size: 30px; 
    } 

    .actions { 
    position: absolute; 
    bottom: 10px; 
    left: 0px; 
    } 

    .fa { 
    width: 20px; 
    height: auto; 
    font-size: 20px; 
    text-shadow: 0.5px 1px 0.7px rgba(0,0,0,0.3);; 
    } 

    .fa-minus-circle{ 
    color: #D03538; 
    } 

    .fa-minus-circle:hover { 
     opacity: 0.3 
    } 

    .fa-pencil{ 
     color: #454545; 
    } 

    .fa-pencil:hover{ 
     opacity: 0.3; 
    } 
} 
</style> 

<div class="container-fluid"> 
    <div class="flex col-sm-3"> 
    <div class="greeting-and-menu"> 
     <h3>Hola!</h3> 
     <div id= "sticky" class="profile-sidebar"> 

     <ul class="nav"> 
      <li class="active"> 
      <a href="#starters"> 
       <p>Entrantes</p> 
      </a> 
      </li> 
      <li> 
      <a href="#meats"> 
       <p>Carnes</p> 
      </a> 
      </li> 
      <li> 
      <a href="#hunting"> 
       <p>Caza</p> 
      </a> 
      </li> 
      <li> 
      <a href="#fishes"> 
       <p>Pescados</p> 
      </a> 
      </li> 
      <li> 
      <a href="#classics"> 
       <p>Especialidades</p> 
      </a> 
      </li> 
      <li> 
      <a href="#desserts"> 
       <p>Postres</p> 
      </a> 
      </li> 
      <li> 
      <a href="#others"> 
       <p>Otros</p> 
      </a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 

    <div class="right-part col-sm-9"> 
     <div id="starters"> 
     <div class="title"> 
      <h2>Entrantes</h2> 
      <hr> 
     </div> 
     <div class="col-sm-12"> 
      <div class="card"> 
      <div class="card-image-area"> 

       </div> 
      </div> 
      <div class="card-details img-rounded img-responsive"> 
       <h3 class="text-centre"></h3> 
       <hr> 
       <p class="description"></p> 
       <p class="price"> €</p> 
       <div class="actions"> 

       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div id="meats"> 
     <div class="title"> 
      <h2>Carnes</h2> 
      <hr> 
     </div> 

     <div class="col-sm-12"> 
      <div class="card"> 
      <div class="card-image-area"> 

       </div> 
      </div> 
      <div class="card-details img-rounded img-responsive"> 
       <h3 class="text-centre"></h3> 
       <hr> 
       <p class="description"></p> 
       <p class="price"> €</p> 
       <div class="actions"> 

       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div id="hunting"> 
     <div class="title"> 
      <h2>Caza</h2> 
      <hr> 
     </div> 
     <div class="col-sm-12"> 
      <div class="card"> 
      <div class="card-image-area"> 


       </div> 
      </div> 
      <div class="card-details img-rounded img-responsive"> 
       <h3 class="text-centre"></h3> 
       <hr> 
       <p class="description"></p> 
       <p class="price"> €</p> 
       <div class="actions"> 

       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div id="fishes"> 
     <div class="title"> 
      <h2>Pescados</h2> 
      <hr> 
     </div> 
     <div class="col-sm-12"> 
      <div class="card"> 
      <div class="card-image-area"> 

       </div> 
      </div> 
      <div class="card-details img-rounded img-responsive"> 
       <h3 class="text-centre"></h3> 
       <hr> 
       <p class="description"></p> 
       <p class="price"> €</p> 
       <div class="actions"> 

       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div id="classics"> 
     <div class="title"> 
      <h2>Especialidades</h2> 
      <hr> 
     </div> 
     <div class="col-sm-12"> 
      <div class="card"> 
      <div class="card-image-area"> 

       </div> 
      </div> 
      <div class="card-details img-rounded img-responsive"> 
       <h3 class="text-centre"></h3> 
       <hr> 
       <p class="description"></p> 
       <p class="price"> €</p> 
       <div class="actions"> 

       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div id="desserts"> 
     <div class="title"> 
      <h2>Postres</h2> 
      <hr> 
     </div> 
     <div class="col-sm-12"> 
      <div class="card"> 
      <div class="card-image-area"> 

       </div> 
      </div> 
      <div class="card-details img-rounded img-responsive"> 
       <h3 class="text-centre"></h3> 
       <hr> 
       <p class="description"></p> 
       <p class="price"> €</p> 
       <div class="actions"> 

       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div id="others"> 
     <div class="title"> 
      <h2>Otros</h2> 
      <hr> 
     </div> 
     <div class="col-sm-12"> 
      <div class="card"> 
      <div class="card-image-area"> 

       </div> 
      </div> 
      <div class="card-details img-rounded img-responsive"> 
       <h3 class="text-centre"></h3> 
       <hr> 
       <p class="description"></p> 
       <p class="price"> €</p> 
       <div class="actions"> 

       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>