Question

我正试图得到这样的东西：

这是一堆彼此重叠的列表项。现在的问题是，

1）如果我确定位置固定并将它们放在底部0和一个边距，一旦我调整窗口大小，它们就会被推出。

2）绝对位置/底部0同样的事情。

3）如果我给出保证金最高限度，它会根据空缺的长度而变化，因此如果文本太长则会消失，或者如果文本很短，则会过于接近文本。

所以我的问题是，我怎样才能确定盒子的大小和上面div的大小，它总是会保持在下面显示的位置。

到目前为止我的结构：

<div class="row">
  <div class="col-md-6 col-xs-12 funky">
    <div id="tinderslide">
      <ul>
        <% @vacancies.each do |vacancy| %>
          <li id="<%= vacancy.id %>">
            <div class="row">
              <div class="col-md-3">
                <i class="fa fa-map-marker markervaca location"> <%= vacancy.city %></i>
              </div>
              <div class="col-md-6">
                <%= image_tag("mcdo.png", class: "company-logo") %>
              </div>
              <div class="col-md-3">
                <p class="loonvaca">€<%= vacancy.wage%>/u</p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3"></div>
              <div class="col-md-6">
                <p class="vactitle"><%= vacancy.name %></p>
              </div>
              <div class="col-md-3"></div>
            </div>
            <div class="row">
              <p class="vacbeschrijving"><%= vacancy.description %></p>
            </div>
            <div class="row" >
              <div class="datumeen">
                <i class="fa fa-calendar bottom-left"></i>
                <i class="fa fa-car bottom-left-second"></i>
                <text class="jobtype">TEMP</text>
              </div>
            </div>
            <% @jobtype = Jobtype.find(vacancy.jobtype_id).name %>
            <%= link_to "", create_friendship_path(vacancy_id: vacancy.id),method: :post, :id => "Vacancy_#{vacancy.id}", :remote => true%>
          </li>
        <% end %>
      </ul>
    </div>
    <div class="row">
      <div class="row accept-or-deny">
        <div class="col-md-4 col-xs-4">
          <%= link_to image_tag("kruis.png", class: "kruis"), root_path %>
        </div>
        <div class="col-md-4 col-xs-4">
          <%= link_to image_tag("share.png", class: "share"), root_path %>
        </div>
        <div class="col-md-4 col-xs-4">
          <%= link_to image_tag("vink.png", class: "vink"), root_path %>
        </div>
      </div>
    </div>
  </div>
</div>

用css;

#tinderslide {
  margin-left: 0;
  margin-right: 0;
}

#tinderslide > ul > li {
  height: 400px;
  width: 75%;
  margin-left: 12.5%;
}


#tinderslide {
  background: none;
  height: 400px;
}


#tinderslide > ul > li > div {
  padding-left: 35px;
  padding-right: 35px;
}

#tinderslide > ul > li {
  border-radius: 4px;
  background-color: white;
}

.company-logo{
  display: block;
  height: 80px;
  width: 80px;
  border-radius: 50px;
  margin-left: 35%;
  margin-top: 15%;
  background-color: white;
}

.markervaca {
  font-size: 15px;
}

.loonvaca {
  font-size: 13px;
  top: 0%;
  right: 0%;
  margin-top: 12%;
  font-weight: bold;
}

#tinderslide > ul > li {
-webkit-box-shadow: 0px 1px 6px 1px rgba(0,0,0,0);
-moz-box-shadow: 0px 1px 6px 1px rgba(0,0,0,0);
box-shadow: 0px 1px 6px 1px rgba(0,0,0,0);
}

.bottom-left {
  color: #807E7F;
  bottom: 0;
  margin-left: 0%;
  float: left;
  margin-bottom: 2%;
}

.bottom-left-second {
  color: #807E7F;
  margin-left: 3%;
  margin-bottom: 2%;
}

.jobtype {
  bottom: 3%;
  right: 5%;
  font-family: Impact;
  font-size: 1.3em;
  color: #807E7F;
  float: right;

}

.location {
  top: 0%;
  left: 5%;
  margin-top: 15%;
}


.vacbeschrijving {
  margin-top: 5%;
}

.vactitle {
  margin-top: 5%;
}

.accept-or-deny {
    background-color: white;
    margin-left: 13.9%;
    margin-top: 2%;
    height: 65px;
    width: 67.5%;
    border-radius: 4px;
}


.kruis {
  height: 55px;
  margin-top: 4%;
  margin-left: 18%;
}

.vink {
  height: 55px;
  margin-top: 4%;
  margin-left: 50%;
}

.share {
  height: 55px;
  margin-top: 4%;
  margin-left: 33%;
}

Answer 1

虽然您尚未发布生成的HTML ..仍尝试提供：

li { position: relative;}
.icon { position: absolute; left: 10px; bottom: 10px; }

了解更多 read this concept 的更多信息更多：example

li div底部的图标

1 个答案: