CSS网页设计：Footer布局与响应式适配问题求助

我在设置footer及类名为sloupec1、sloupec2的元素样式时遇到问题：尝试用float实现两列并排失败，Flexbox效果也不理想，想要实现目标设计中的footer样式，同时完成网站响应式适配。

相关HTML代码 #

<footer>
    <div class="sloupec1">
        <h3>VŠE O NÁKUPU</h3>
        <ul>
            <li><a href="#">Obchodní podmínky</a></li>
            <li><a href="#">Možnosti doručení</a></li>
            <li><a href="#">Možnosti platby</a></li>
        </ul>
    </div>
    <div class="sloupec2">
        <h3>O SPOLEČNOSTI</h3>
        <p>Základní informace</p>
        <p>Kontakt</p>
    </div>
    <div class="copyright">
        &copy; 2023 Mojezahrada.cz Všechna práva vyhrazena.
    </div>
</footer>

解决方案 #

以下是基于Flexbox的正确实现方案，包含布局样式和响应式适配：

1. 核心布局CSS

/* 基础footer容器设置 */
footer {
    background-color: #f0f0f0; /* 可根据设计调整背景色 */
    padding: 2rem 5%;
    display: flex;
    flex-wrap: wrap; /* 为响应式换行做准备 */
    justify-content: space-between; /* 两列左右分布 */
    gap: 2rem; /* 列之间的间距 */
}

/* 两个列的基础样式 */
.sloupec1, .sloupec2 {
    flex: 1 1 250px; /* 弹性增长，最小宽度250px，适配不同屏幕 */
}

/* 列表样式优化 */
.sloupec1 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sloupec1 ul li {
    margin: 0.5rem 0;
}

.sloupec1 ul li a {
    color: #333;
    text-decoration: none;
}

.sloupec1 ul li a:hover {
    text-decoration: underline;
}

/* 版权信息样式 */
.copyright {
    width: 100%; /* 独占一行 */
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 0.9rem;
}

2. 响应式适配

添加媒体查询，在小屏幕（如手机）下让两列垂直堆叠：

@media (max-width: 768px) {
    footer {
        flex-direction: column;
        align-items: center; /* 内容居中 */
        text-align: center;
    }
}

说明 #

• 用flex: 1 1 250px保证两列在屏幕足够宽时平分空间，屏幕变窄到250px以下时自动换行堆叠；
• flex-wrap: wrap配合媒体查询，实现流畅的响应式切换；
• 版权信息通过width:100%强制独占一行，保证布局完整性；
• 可根据设计图调整背景色、字体颜色、间距等样式参数，匹配目标效果。

内容的提问来源于stack exchange，提问作者Robin Tokarský