上記のテキストに従ったページ上のボタンの配置

カートに追加する

上の画像を見る

ページの同じ行にある他のユーザーと位置を合わせるための[カートに追加]ボタンを取得しようとしています。私は現在、2つの方法のうちの1つを行うことだけを意識しています。

  1. 1つの要素の間に空白を追加して正しく配置されるようにする
  2. 各商品要素に固定の高さを設定する

問題は、テキストが長くなり(画像に表示されているように)折り返されると、ボタンがページ上で垂直方向に整列しなくなることです。

この状況ではどちらが良い選択でしょうか。また、そのタスクを完了するにはどうすればよいでしょうか。

1
マークアップを追加しないと、適切な回答が得られる可能性が低くなります。
追加された 著者 Andrei Gheorghiu,

5 答え

空白を追加するのは適切な解決策ではありません。同じ固定の高さを設定するとうまくいくでしょう、あなたは望ましい結果を達成するために "マージン"、 "パディング"、そして "ラインの高さ"で遊ぶオプションを持っています。

0
追加された

これをflexboxで試してみて、アイテムの整列のストレッチ(製品の最小/最大の高さ)を使って、カートリンクに追加します。

https://css-tricks.com/snippets/css/a -guide-to-flexbox/

0
追加された

Better to set fixed height for block before button or make position for button related to main block use CSS option "position" for product block as "relative" and for button as "absolute" and set it to bottom (bottom: 0;). You can read more here: https://www.w3schools.com/css/css_positioning.asp

0
追加された

商品画像のサイズを一定の高さに変更すると、CSSを使用せずに配置を修正できます。

あるいは、すべての画像の最も高い画像に等しい最小の高さを設定すると、すべての項目が整列します。

0
追加された

カードに特定の高さを割り当て、カードの内容を3つの部分に分割することをお勧めします。image/content/button(自動車に追加)、これら3つの要素の親コンテナに次のプロパティを割り当てます。

.card-wrapp {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

そして、あなたはタイトルに特定のサイズを割り当てる必要があるでしょう。

.card__title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
0
追加された