に質問検索_PHP中国語ウェブサイト

コミュニティ学ぶツールライブラリレジャー

日本語

人気の検索：
PHP
MySQL
jquery
HTML
CSS

画像とコンテンツを含むレスポンシブなページをデザインする

私はフロントエンドを初めて使用するため、レイアウトと応答性にいくつかの問題を抱えています。これはこれまでの私のコードです: body{margin:0;background-color:#353535;}.header{color:white;text-align:center;font-size:20px;margin:auto;font-family :'Inter ',セリフ;フォントの太さ:太字;幅:700ピクセル;

P粉676588738 2023-09-07 15:55:30

フレックスボックスを使用してこのレスポンシブレイアウトを実装する方法

Flex コンテナ内に xy 個のカードと 1 つのウィジェットをレンダリングする React アプリを作成しています。すべてのカードの幅と高さは同じですが、ウィジェットの高さはカードの高さ * 2 + 行ギャップに等しくなります。コンテナの幅はビューポートの幅に応じて変化し、視覚的にはそれぞれカードが 2 列または 3 列に見えるはずです。さらにわかりやすくするために、ウィジェットを青で表した、必要なレイアウトのモックアップ画像を提供しました。何を試しても、行の高さをそのサイズに変更せずにウィジェットを正しい位置に表示することはできず、「空」のままになります。

P粉733166744 2024-02-26 19:29:01

css - 背景画像を含むレスポンシブレイアウトを記述する方法

これと同様に、背景画像を含むコンポーネントを作成したいのですが、背景画像のサイズを 100% にすることはできず、中央にコンテンツ、左側に画像、右側にテキストがなければなりません。反応しますか？

怪我咯 2017-07-06 10:37:20

css3 - グラフィックとテキストに対応したスタイル

PC デスクトップでこのページをレスポンシブにする: 1 つの方法は画像を直接レスポンシブにする方法ですが、唯一の欠点はテキストがぼやけ、効果が完璧ではないことです。 , このように、テキストのサイズを適応させる必要があり、テキストの位置関係を適切に行うのはさらに困難です...

習慣沉默 2017-05-16 13:20:57

JavaScript - CSS カルーセルチャートがレイアウトの問題に適応する

カルーセルレイアウトと同様に、外側の青いコンテナは幅が設定されておらず、100% 適応されます。各サブコンテナの幅は親コンテナの幅と等しく、行に表示されます。親を超えた部分は、要素が非表示になっていますが、jsを使わずに特定の環境下で実現できますか？

给我你的怀抱 2017-06-13 09:23:41

チャット gpt 応答のフォーマット

React アプリケーションでチャット gptapi を使用しています。私が直面している問題は、chat gpt からの応答をどのようにフォーマットするかです。テーブル形式で応答するように依頼すると、奇妙な応答が返されます。プレマークを使用してテキストを表示し、応答にはこのように添付された画像が表示されますが、チャット gpt のような正しいテーブルが必要です。同様に、別の行に項目のリストではなく段落形式として表示されるので、チャットの GPT 応答を正しくフォーマットする方法を尋ねます。 chat gpt で表示される正しいテーブルとリストが欲しいのですが、

P粉563446579 2023-10-25 14:53:41

javascript -layuiのテーブルレイアウトで、tdの内容が多すぎて長すぎると、テーブルページが圧迫されて変形してしまいます。より良いレイアウト方法を探しています

タイトルにあるように、このページは主に関連情報を表示するために使用されます。 tdの内容が多すぎると次の行が圧迫されてしまいます。より良いレイアウト方法を探したい場合は、テーブルレイアウトは必ずしも必要ではありません]

迷茫 2017-07-06 10:35:25

css - flex を使用して 3 列レイアウトを実装する方法ですが、子要素の高さは適応的である必要がありますか?

flex を使用して図の 3 列のレイアウトを実装したいと考えています。現在、次の問題が発生しています。親要素が display: flex に設定されている場合、3 つの列の高さが同じになり、3 つの列の高さが必要になります。列をアダプティブに設定しようとしましたが、 flex-direction:colume も flex-flow:row nowrap も目的の効果を達成できません。

滿天的星座 2017-05-16 13:45:22

Chrome拡張機能でHTTPレスポンスを変更する

HTTP 応答本文を変更できる Chrome 拡張機能を作成することはできますか? Chrome 拡張機能 API を調べましたが、この機能を実装するものは見つかりませんでした。

P粉038161873 2023-08-21 23:44:53

Flex に埋め込まれたレスポンシブ YouTube

レスポンシブ YouTube やその他のコンテンツを Flex コンテナに埋め込もうとしましたが、YouTube の埋め込みが含まれるコンテナが拡張されないため、他の要素と重なっているか、他の要素と重なっています。うまく説明できたかどうかわからないので、デモ用のコードとボックスも作成しました: https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.jsimport{Box,Paper }「@mui/mat から」

P粉111641966 2024-03-21 23:20:29

ブートストラップのランディングページレイアウトの問題 - コンテナが画面サイズに正しく適合しない

現在、Bootstrapを使ってランディングページを作成する練習をしています。ただし、レイアウトの問題に直面しています。コンテナーが適切な画面サイズに適合しません。左右のバランスが崩れて画面が左に傾いてしまいます。問題を示すスクリーンショットは次のとおりです (リンク): テキストさまざまなことを試しましたが、問題を解決できませんでした。これは、ブートストラップのグリッドシステムまたはコンテナ設定に問題があるのではないかと思います。このレイアウトの問題のトラブルシューティングと修正方法を誰かが教えてくれませんか?ご提案や洞察をいただければ幸いです。さらに、関連するコードスニペットをいくつ...

P粉214089349 2023-09-10 21:04:02

レスポンシブ画像とテキスト Div を並べて表示

そこで、1 つの div が画像で、もう 1 つが背景付きのテキストであるテンプレートを作成しようとしています。次に、このテンプレートをレスポンシブにして、テキストが特定のピクセル幅で画像の下に表示されるようにしたいと思います。 stackoverflow を調べてみると、Flexbox を使用するべきだという投稿が無数にありました。試してみましたが、完全には理解できませんでした。したがって、デスクトップでは次のようになります: https://i.stack.imgur.com/HDehv.jpg スマートフォンでは、ここにジャンプするはずです https://i.stack.im

P粉005134685 2024-04-02 08:59:38

Vue 3 でコンポーネントインスタンスに非応答データを設定するにはどうすればよいですか?

Vue2 についても同様の質問があり、$options を使用することが推奨されていました。ただし、Vue3 では機能しないようです。まず、Vue3 のドキュメントには、$options は読み取り専用であると記載されています。そのため、コンポーネントがマウントされているときにインスタンスでツールチップを初期化しようとすると、非常に奇妙な動作が発生します。ツールチップが表示されるとき、ツールチップは最後に作成されたコンポーネントから表示されるため、$options が何らかの形で「グローバル」になっているようです「？ツールチップをデータに入力すると、すべてが正常に機能しますが、どうやらツールチ...

P粉973899567 2023-08-25 23:08:24

ionic Angular と ngfor でレスポンシブグリッドを作成するにはどうすればよいですか?

ionicAngular と ngfor でレスポンシブなグリッドを作成するにはどうすればよいですか?グリッドテンプレートを説明するには、ここに画像の説明を入力します: <ion-grid><ion-row><ion-col><ion-item*ngFor="letprodofdisplayedList" class="item-entry"detailrouterLink=&quot

P粉106715703 2023-09-14 22:57:49

モバイルデバイスではレスポンシブレイアウトカードが正しく表示されません

説明 Web ページを作成する場合、モバイルバージョンを試すまでは、ChromeDevTools ですべてが期待どおりに動作していました。なぜこのようなことが起こるのでしょうか?そのような問題に遭遇したことはありません。再現手順これはデスクトップ版で起こることです。幅を縮小した後: これは予想通りです。モバイル版をアクティブにすると、突然機能しなくなりました。flex+flex-wrap+flex-direction を使用したり、grid+grid-template-columns:Repeat(auto-fit,minmax) を使用したりしても、

P粉878510551 2024-03-19 22:21:02

レスポンシブブロックをフレックス列に配置する

ヘッダー、ボード、フッターのあるゲーム Web サイトを持っています。 3 つすべてがビューポート内に収まるようにする必要があります。これを実現するには基板を小さくする必要があります。縮小化が私が抱えている問題です。幅を応答させることはできましたが、高さを制限することはできませんでした。ボードは正方形のままで未使用のスペースを占めるか、オーバーフローを防ぐために縮小する必要があります。以下のようなことをしているのですが、チェス盤が親の高さからはみ出してしまいます。実際のコードでは、行の折り返しによりヘッダーの高さは不明です。フッターにはさまざまな量のテキストが含まれます。チェス盤の内部には、行...

P粉545682500 2023-09-03 19:51:51

SVG イメージを使用してレスポンシブグリッドエリアを作成できません

SVG 画像を含むレスポンシブなグリッド領域を作成しようとすると、グリッド領域の幅が任意になったり、画像を停止せずに特定の点まで拡大または縮小したりできないなどの奇妙な動作が発生します。私が得た最も近いものは次のとおりでした: *{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr;background-color:green;padding:1r

P粉022140576 2023-08-30 19:15:16

単一のグリッドまたは Flex を使用して多様なカードレイアウトを作成する: 実用的なガイド

写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイルデバイス用に個別のレイアウトを作成することです。次に、メディアクエリを使用して、他の 2 つのビューの表示プロパティを display:none に設定します。例: [コンピュータ] ビューにいる場合、コンピュータのカードレイアウトではディスプレイが「なし」に設定されていませんが、他の 2 台のコンピュータではディスプレイが「なし」に設定されています。これは機能しますが、多くの冗長性が生じます。 Flex または Grid を使用して 3 つのレイアウトすべてを実...

P粉808697471 2024-04-02 21:07:36

同時実行性、メッセージキュー、ロードバランシング、キャッシュ、分散、セキュリティ、これらはあなたの履歴書のハイライトですか? Java新卒、半年以上インターン

同時実行性、メッセージキュー、ロードバランシング、キャッシュ、分散、セキュリティ、これらはあなたの履歴書のハイライトですか? Java新卒、半年以上インターン

漂亮男人 2017-06-12 09:27:05

Angular でリアクティブフォームデータを編集するための必須の方法である Observable をサブスクライブする必要はありません

これは、観察可能なデータに基づいてリアクティブフォームを購読し、更新するために私が使用してきたプロセスです。おそらく、observable をサブスクライブして値を変更せずに問題を解決する方法があるかもしれません。 @Component({selector:'app-my-component',template:`<form[formGroup]="myForm"><inputformControlName="name"/>

P粉587970021 2024-03-29 18:37:15