如何实现两张等宽卡片并排且自适应屏幕宽度？

要实现两张卡片并排且等宽自适应，只需对代码做以下两处关键修改：

1. 添加卡片容器：用一个外层div包裹两张卡片，设置flex布局并允许换行
2. 调整卡片的flex属性：让卡片自动平分可用宽度，同时限制最小宽度避免过度压缩

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Menu</title>
    <style>
        .card-container {
            display: flex;
            gap: 20px;
            padding: 20px;
            flex-wrap: wrap;
        }

        .custom-box {
            background-color: #ff5733;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            font-family: Arial, sans-serif;
            flex: 1 1 0;
            min-width: 300px;
        }

        .box-title {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }

        .box-content {
            margin-top: 10px;
            font-size: 18px;
            color: #333;
        }

        .custom-button {
            background-color: #ff8f33;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }

        .custom-button:hover {
            background-color: #ff5722;
        }

        .dropdown-content {
            display: none;
            flex-direction: column;
            align-items: center;
        }

        .dropdown-item {
            margin: 10px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="custom-box">
            <div class="box-title">Dropdown Menu 1</div>
            <div class="box-content">
                Sample Text 1
            </div>
            <button class="custom-button" id="dropdown-button-1">Click Me</button>
            <div class="dropdown-content" id="dropdown-menu-1">
                <div class="dropdown-item">Item 1</div>
                <div class="dropdown-item">Item 2</div>
                <div class="dropdown-item">Item 3</div>
            </div>
        </div>

        <div class="custom-box">
            <div class="box-title">Dropdown Menu 2</div>
            <div class="box-content">
                Sample Text 2
            </div>
            <button class="custom-button" id="dropdown-button-2">Click Me</button>
            <div class="dropdown-content" id="dropdown-menu-2">
                <div class="dropdown-item">Item A</div>
                <div class="dropdown-item">Item B</div>
                <div class="dropdown-item">Item C</div>
            </div>
        </div>
    </div>

    <script>
        // 为第一个下拉菜单绑定事件
        const dropdownButton1 = document.getElementById('dropdown-button-1');
        const dropdownMenu1 = document.getElementById('dropdown-menu-1');
        dropdownButton1.addEventListener('click', () => {
            dropdownMenu1.style.display = dropdownMenu1.style.display === 'none' ? 'flex' : 'none';
        });

        // 为第二个下拉菜单绑定事件
        const dropdownButton2 = document.getElementById('dropdown-button-2');
        const dropdownMenu2 = document.getElementById('dropdown-menu-2');
        dropdownButton2.addEventListener('click', () => {
            dropdownMenu2.style.display = dropdownMenu2.style.display === 'none' ? 'flex' : 'none';
        });
    </script>
</body>
</html>

关键代码解释 #

• .card-container：display:flex 启用弹性布局，gap:20px 设置卡片间距，flex-wrap:wrap 确保屏幕宽度不足时卡片自动换行。
• .custom-box：flex:1 1 0 让卡片平分容器的可用宽度（1 表示可放大，1 表示可缩小，0 表示基准宽度为0），min-width:300px 避免卡片在窄屏上变得过窄影响体验。

内容的提问来源于stack exchange，提问作者s.ha11