CSS 平铺+自动换行效果

先上效果图

 

 样式

<template><div class="activity-questions"><h1>活动题库</h1><div v-if="loading" class="loading">加载中...</div><div v-else><div v-if="questions.length === 0" class="no-questions">暂无题库</div><div v-else class="questions-container"><div v-for="question in questions" :key="question.id" class="question-item"><img v-if="question.image_url" :src="question.image_url" alt="题目图片" class="question-image" /><p class="question-text">{{ question.description }}</p><div class="options"><p v-if="question.option_a">A: {{ question.option_a }}</p><p v-if="question.option_b">B: {{ question.option_b }}</p><p v-if="question.option_c">C: {{ question.option_c }}</p><p v-if="question.option_d">D: {{ question.option_d }}</p><p v-if="question.option_e">E: {{ question.option_e }}</p><p v-if="question.option_f">F: {{ question.option_f }}</p><p v-if="question.option_g">G: {{ question.option_g }}</p><p v-if="question.option_h">H: {{ question.option_h }}</p><p v-if="question.option_i">I: {{ question.option_i }}</p><p v-if="question.option_j">J: {{ question.option_j }}</p></div></div></div></div></div>
</template><script>
import { getQuestionsByActivityConfig } from '@/api/biz/biz_question';export default {name: 'ActivityQuestions',data() {return {activityId: null,questions: [],loading: true,};},async created() {const urlParams = new URLSearchParams(window.location.search);this.activityId = urlParams.get('activity_id') || '1';if (this.activityId) {try {const response = await getQuestionsByActivityConfig(this.activityId);if (response && response.code === 200) {this.questions = response.data;} else {console.error('题库加载失败', response);}} catch (error) {console.error('获取题库时发生错误', error);} finally {this.loading = false;}} else {console.error('活动ID未提供');this.loading = false;}},
};
</script><style scoped>
.activity-questions {text-align: center;padding: 20px;
}
.loading {font-size: 18px;color: #888;
}
.no-questions {font-size: 18px;color: #888;
}
.questions-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;justify-content: center;
}
.question-item {border: 1px solid #ddd;border-radius: 8px;padding: 15px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);text-align: center;
}
.question-image {max-width: 100%;height: auto;border-radius: 4px;
}
.question-text {font-size: 18px;margin-top: 10px;font-weight: bold;
}
.options p {font-size: 16px;margin: 5px 0;
}
</style>