元素无缘无故地相互重叠?

时间:2017-12-30 01:17:25

标签: html css css3

出于某种原因,div重叠div s,因此我的锚链接不起作用。我使用了检查员,似乎有些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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我认为您使用的后端代码和条件存在问题。我检查了你的代码,如果条件没有工作正常。

<android.support.design.widget.TextInputLayout
                    android:id="@+id/input_layout_pass"
                    android:layout_width="match_parent"
                    android:layout_height="37dp"
                    android:layout_marginTop="10dp"
                    android:layoutDirection="rtl"
                    android:src="@drawable/ic_https_grey600_18dp"
                    app:hintEnabled="false"
                    app:passwordToggleEnabled="true">

                    <EditText
                        android:id="@+id/password"
                        style="@style/edittexts"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:drawableLeft="@drawable/ic_https_grey600_18dp"
                       android:drawableStart="@drawable/ic_https_grey600_18dp"
                        android:hint="رمز عبور"
                        android:gravity="right|center_vertical"
                        android:imeOptions="actionDone"
                        android:inputType="textPassword"
                        android:transformPivotX="10dp"
                        app:passwordToggleEnabled="true" />

                </android.support.design.widget.TextInputLayout>
相关问题