Question

我有这个div（其中8个在一页中）有一个未知的高度（根据数据注入的高度变化），我需要“粘”它到div的底部。但它没有成功。

的CSS：

    .menuItem {
    width: 45%;
    padding-top: 2%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: white;
    line-height: 2.5em;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 5%;
    margin-top: 5%;
    box-shadow: 0.33em 0.25em 3.25em black;
    text-align: center;
    color: black;
    float: left;
    height: 350px;
}
.menuItem h2 {
    font-size: 1.5em;
    font-weight: 100;
    font-family: "Alef Hebrew", 'Lobster', cursive;
    border-bottom: solid black;
    padding-bottom: .6em;
    width: 99%;
    font-stretch: narrower;
}

.menuItem p {
    font-size: 1.2em;
}

.menuItem span {
    font-weight: lighter;
    width: auto;
    letter-spacing: .2em;
    color: white;
    background-color: black;
    padding: 2%;
    display: table;
    margin-top: -10%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.menuItem img {
    width: 35%;
    display: table;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0.33em 0.25em 1.25em black;
    /*margin-bottom:2%;*/
}

.menuItem ul {
    position:relative;
    margin-bottom:10px;
    width: 100%;
    display: table;
    margin-right:auto;
    margin-left: auto;
    background-color: black;

    margin-top: 1em;
}

.menuItem li {
    float:left;
    margin-right: auto;
    margin-left: auto;
    color: white;
    font-size: 1em;
    direction: rtl;
    width: 33%;
    list-style: none;
}`

Answer 1

看到这个小提琴：http://jsfiddle.net/jLzza/5/。样式更改在下面注释。

使用以下样式规则：

.menuItem {
  position: relative;   //New rule required for the absolute positioning of the ul.
  width: 45%;
  padding-top: 2%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 60px;   //Pad up below as much as the height of the ul + its distance from the bottom
  background-color: white;
  line-height: 2.5em;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 5%;
  margin-top: 5%;
  box-shadow: 0.33em 0.25em 3.25em black;
  text-align: center;
  color: black;
  float: left;
}

.menuItem h2 {
    font-size: 1.5em;
    font-weight: 100;
    font-family: "Alef Hebrew", 'Lobster', cursive;
    border-bottom: solid black;
    padding-bottom: .6em;
    width: 99%;
    font-stretch: narrower;
}

.menuItem p {
    font-size: 1.2em;
}

.menuItem span {
    font-weight: lighter;
    width: auto;
    letter-spacing: .2em;
    color: white;
    background-color: black;
    padding: 2%;
    display: table;
    margin-top: -10%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.menuItem img {
    width: 35%;
    display: table;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0.33em 0.25em 1.25em black;
    /*margin-bottom:2%;*/
}

.menuItem ul {
    position: absolute;  // Rule required to position it absolutely w.r.t to the div
    bottom: 10px;         // 10px of distance from the bottom.
    width: 172px;
    display: table;
    margin-right:auto;
    margin-left: auto;
    background-color: black;

    margin-top: 1em;
    margin-bottom: 0px;  // This rule is required to nullify the effect of user-agent differences
    padding: 0 10px;
}

.menuItem li {
    float:left;
    color: white;
    font-size: 1em;
    direction: rtl;
    width: 50%;
    list-style: none;
}

将ul粘贴到div的底部

1 个答案: