シナリオ 最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要です。コンテナーを超える部分は左右にスライドでき、各カードの左上隅に削除ボタンが必要です。以下のように表示されます。 私はこう思いました: とても簡単だ、親コンテナーに max-width: 200px; white-space: nowrap; overflow-x: auto; を追加するだけで完了する。デモは次のとおりです。 <div class="コンテナ"> <div class="son"> <div class="delete_btn"></div> </div> <div class="son"> <div class="delete_btn"></div> </div> <div class="son"> <div class="delete_btn"></div> </div> </div> 。容器 { 最大幅: 500px; オーバーフローx: 自動; 空白: ラップなし; } .息子{ 表示: インラインブロック; 幅: 200ピクセル; 高さ: 200px; 背景色: 水色; 位置: 相対的; 右マージン: 20px; } .delete_btn { 幅: 20px; 高さ: 20px; 位置: 絶対; 上: 0; 左: 0; 背景色: 赤; 変換: translateX(-50%) translateY(-50%); } すべてうまくいったと思いましたが、結果は次のようになりました。 長方形の左上隅にある赤い四角を見てください。元の 20 x 20 の赤い四角の一部が隠れています。オーバーフローが原因かと思い、overflow-y: visible; を使って解決しようとしましたが、うまくいきませんでした。注意深い友人は、オーバーフローのデフォルト値が表示されていることに留意する必要があります。それで、その理由は何でしょうか? なぜ 長い間調べた結果、大体以下の理由が分かりました 'overflow-x' と 'overflow-y' の計算値は、'visible' との組み合わせが一部不可能なことを除いて、指定された値と同じです。一方が 'visible' に指定され、もう一方が 'scroll' または 'auto' に指定されている場合、'visible' は 'auto' に設定されます。'overflow-y' が同じ場合、'overflow' の計算値は 'overflow-x' の計算値と等しくなります。それ以外の場合は、'overflow-x' と 'overflow-y' の計算値のペアになります。 追伸: 上記の段落は W3C ドキュメントからの引用ですが、長い間検索しても元のテキストが見つかりませんでした。見つかったら、リンクを残してください。[Manual dog head] どうやって 結局、左上隅の赤い四角形を完全に表示したいのですが、解決策は何でしょうか?ここでは、次のスタイルを使用してコンテナに追加します パディング上部: 20px; 上マージン: -20px; 原理は実はとてもシンプルです。padding-top: 20px; を追加すると、絶対配置された赤い四角形に表示スペースが確保され、コンテナのボリュームを超えなくなります。次に、位置の変更は margin-top: -20px; によってオフセットされます。図に示すように ps: 最初の赤い四角の左側の覆われた部分も同じ考え方、つまり padding-left と margin-left を使用して解決されます。 要約する 上記は、エディターが導入した CSS で overflow-y: visible; が機能しない理由の分析と解決方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: ChromeはCookieの変更を監視し、値を割り当てます
この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...
1. 要約:一般的に、次のカテゴリに分類できます。 Docker 環境情報 — docker [i...
前回述べた問題を解決するために、オンラインで検索したところ、非常に優れたビジュアル インターフェース...
目次1. 何ですか2. 使用数値列挙文字列列挙異種列挙自然3. 応用シナリオ要約する1. 何ですか列...
webpack-dev-server コアコンセプトWebpack の ContentBase と ...
MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...
Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...
MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...
目次解決された主な問題1. バックエンドから返され、バックエンドに送信されるデータは、次の形式になり...
目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...
目次序文デザイン成し遂げるまとめ序文最近は、いつも延々とスワイプしています。 Weibo をチェック...
1. テーブル構造テーブル人id名前1あなた2あなた(スペース) 3あなた(スペース2つ) 2. ク...
この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに...
<br />オリジナルURL: http://www.lxdong.com/post/m...
プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...