css - 移动端布局的问题

Question

移动端要实现一行三个方块的布局，大小自适应，

1、里面的小方块（书籍封面）的width和height写死时， 如何实现这样的布局？

2、小方块（书籍封面）的width和height不写死时， 如何实现这样的布局，？

哪种方法实现比较简单？

Answer 1

Si vous avez envie de l'écrire trop fort, vous devez calculer la distance entre les marges gauche et droite de chaque couverture. Vous devriez pouvoir la calculer en utilisant calc en css

.

Si vous ne l'écrivez pas à mort, utiliser display:flex devrait être le plus simple à mettre en œuvre

Answer 2

Écrivez des mots à mort. . L'adaptation rem est-elle considérée comme codée en dur ?
Si vous ne voulez pas l’écrire, utilisez simplement le flex mentionné ci-dessus.

Answer 3

Si vous souhaitez l'écrire, placez un conteneur d'une largeur de 33,3% à l'extérieur de chaque livre, si la largeur à l'intérieur est fixe, utilisez margin:auto. Utilisez calc pour enregistrer une couche de conteneurs. unités de fenêtre ~
Non codé en dur, la flexibilité peut être implémentée, et le pourcentage de largeur et l'unité de fenêtre peuvent également être modifiés