1

私はhtmlとcssにかなり慣れていないので、おそらくこれは答えるのが非常に簡単な質問です.もしそうなら、申し訳ありません.

レスポンシブになるようにページを適切に設定する方法について、いくつかの調査を行いました。もともと、私は自分の Web ページの 1 つでイメージとコメントを配置するためにテーブルを使用していました。（参照用にhttp://www.maddielabstudio.com/artwork-tableに残しました。）その後、携帯電話に正しく表示されていないことがわかりました。少し調べた結果、そもそもテーブルを使用するべきではなかったので、div タグと CSS の方が優れたソリューションであるという結論に達しました。

画像を必要な場所に配置し、画面サイズの変更に合わせて適切にスケーリングできるようにしました。ただし、コメントを画像の右側に配置し、画像の垂直方向の中央に配置する方法がわかりません。理想的には、画面が特定のサイズを下回った場合、コメントを画像の下に移動したいと思います。これを設定しようとしてこれまでに得たものは次のとおりです: www.maddielabstudio.com/artwork. 基本的には、表で作ったページのように見せたいのですが、レスポンシブにするために、必要に応じて画像を縮小し、電話の画面サイズではコメントを画像の下に移動します。

どんな助けや提案も大歓迎です。ありがとう！

4

2 に答える 2

1

画像の右側にコメントを表示するには、次のようにします。

削除してスタイルfloat:leftに追加します。スタイルに追加します。display:inline-block.artworkdisplay:inline-block.commentary

vertical-align:middle縦揃えについては、これらのスパンタグに設定できると思います。

于 2013-10-02T13:54:14.247 に答える
1

Skeleton ( http://www.getskeleton.com )など、CSS のレスポンシブ グリッド システムを検討することをお勧めします。それらは非常に使いやすく、多くの面倒な作業を行ってくれます!

また、画像をスケーリングするためにこれを試してください：

img {
    max-width: 100%;
}
于 2013-10-02T13:28:52.460 に答える