1

少しのコンテンツとボタンがある順序付けられていないリストがあります。列 (LI) は常に同じ高さになるとは限りませんが、ボタンは常に一番下に配置したいと考えています。display: table / display: table-cell トリックを使用して LI を同じ高さに保ちますが、ボタンを正しく配置できません。下部にボタンが必要ですが、コンテンツのように動作することも必要です。つまり、ブラウザのサイズが変更されると、中央に配置して幅を変更したいということです。

これは、問題を示すフィドルです。

http://jsfiddle.net/mattymess/BBuqY/

これは、同じ高さをどのように行っているかを示すコードのスニペットです...

.rewards .rewards-chooser {
  margin: 0;
  border-top: 2px solid #f4f4f4;
  border-bottom: 2px solid #f4f4f4;
  display: table;
  width: 100%;
  position: relative;
}
.rewards .reward {
  width: 25%;
  border-left: 2px solid #f4f4f4;
  list-style: none;
  display: table-cell;
}
4

1 に答える 1

0

次のようにin classに変更position: absolute;します。position: relative;.rewards .reward .redeem

.rewards .reward .redeem {
    position: relative;
    bottom: 0;
    box-sizing: border-box;
}

知識だけ：あなたのボタンは何か（あなたのコンテナ）に相対的であり、絶対的ではありません。

同じ行にボタンを設定するには、コンテナ スコープの高さを定義する必要があります。このようなもの：

.reward-description {
    height: 200px;
}

私はあなたのためにきれいな例を作りました。表示するには、ここをクリックしてください (jsFiddle)。

于 2013-07-03T17:59:06.870 に答える