HTML前端布局需求咨询：产品图展示及表单控件位置调整

核心修改点 #

• 单选框换行修复：给.container选择器新增clear: both属性，清除上方成人/儿童计数器的浮动影响，自动换行到下一行展示
• 左侧图片区功能实现：
  • 新增主图展示容器，支持单图/双图并排展示，图片可自定义超链接
  • 新增缩略图切换功能，点击对应缩略图即可更换主图内容
  • 保留原有响应式适配，移动端下自动切换为上下布局

完整可运行代码 #

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          @media (max-width: 640px) {
            .banner {
              flex-direction: column;
            }
            .clm {
              width: 100% !important;
              padding: 0 15px !important;
              box-sizing: border-box;
            }
          }
  
          body {
              margin: 0;
              box-sizing: border-box;
              min-height: 100vh;
              min-width: 100vw;
          }
  
          .banner {
              width: 100vw;
              display: flex;
              justify-content: space-around;
              padding: 20px 0;
              box-sizing: border-box;
          }
  
          .col-2 {
              margin: 2%;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .clm img {
              width: 100%;
          }

          .counter1 {
                float: left;
                display: flex;
                justify-content: space-between;
                overflow-x: hidden;
                overflow-y: hidden;
                align-items: center;
            }

            .counter2 {
                float: left;
                display: flex;
                justify-content: space-between;
                overflow-x: hidden;
                overflow-y: hidden;
                padding-left: 15px;
                align-items: center;
            }
            .clm {
                width: 48%;
                padding-left: 20px;
                box-sizing: border-box;
            }

          .up, .down {
                display: inline-block;
                color: rgb(0, 0, 0);
                font-size: 25px;
                margin: 1px 1px;
                cursor: pointer;
                width: 15px;
                line-height: 14px;
                height: 16px;
                text-align: center;
                font-weight: bold;
                border: 1px solid #000;
                user-select: none;
            }
            .up:hover, .down:hover {
                color: #fd0b3f;
                text-align: center;
            }

            .adults, .children {
                padding-right: 5px;
                line-height: 21px;
            }

            input {
                appearance: none;
                height: 21px;
                text-align: center;
                width: 42px;
                line-height: 24px;
                font-size: 15px;
                border-radius: 5px;
                border: 1px solid #ddd;
                margin: 0 3px;
            }
            .container {
                float: left;
                display: flex;
                justify-content: space-between;
                clear: both;
                margin-top: 15px;
            }
            input[type="radio"]{
                display: none;
            }
            label[for=private] {
                position: relative;
                color: orangered;
                font-size: 16px;
                padding: 6px 12px;
                border: 2px solid orangered;
                border-radius: 5px;
                display: flex;
                cursor: pointer;
                margin-right: 10px;
            }
            label[for=shared] {
                position: relative;
                color: orangered;
                font-size: 16px;
                padding: 6px 12px;
                border: 2px solid orangered;
                border-radius: 5px;
                display: flex;
                cursor: pointer;
            }
            input[type="radio"]:checked + label{
                background-color: orangered;
                color: white;
            }
            input[type="radio"]:checked + label:before{
                height: 16px;
                width: 16px;
                border: 10px solid white;
                background-color: orangered;
            }
            /* 新增左侧图片区样式 */
            .main-img-wrapper {
                width: 100%;
                display: flex;
                gap: 10px;
                margin-bottom: 10px;
            }
            .main-img-wrapper a {
                flex: 1;
            }
            .main-img-wrapper img {
                width: 100%;
                border-radius: 4px;
            }
            .thumbnail-list {
                display: flex;
                gap: 10px;
                overflow-x: auto;
                padding-bottom: 5px;
            }
            .thumb-item {
                width: 80px;
                height: 80px;
                object-fit: cover;
                border: 2px solid transparent;
                border-radius: 4px;
                cursor: pointer;
            }
            .thumb-item.active {
                border-color: orangered;
            }
      </style>
            <script>

                function increaseCount(e, el) {
                    var input = el.previousElementSibling;
                    var value = parseInt(input.value, 10);
                    value = isNaN(value) ? 0 : value;
                    value++;
                    input.value = value;
                }
                function decreaseCount(e, el) {
                    var input = el.nextElementSibling;
                    var value = parseInt(input.value, 10);
                    if (value > 1) {
                        value = isNaN(value) ? 0 : value;
                        value--;
                        input.value = value;
                    }
                }
                function decreaseCount2(e, el) {
                    var input = el.nextElementSibling;
                    var value = parseInt(input.value, 10);
                    if (value > 0) {
                        value = isNaN(value) ? 0 : value;
                        value--;
                        input.value = value;
                    }
                }
                // 页面加载完成后绑定缩略图切换事件
                window.onload = function() {
                    document.querySelectorAll('.thumb-item').forEach(thumb => {
                        thumb.addEventListener('click', function() {
                            // 切换缩略图激活状态
                            document.querySelectorAll('.thumb-item').forEach(t => t.classList.remove('active'));
                            this.classList.add('active');
                            // 更换主图
                            document.getElementById('mainProductImg').src = this.getAttribute('data-img');
                        })
                    })
                }
            </script>
    </head>
    <body>
        <div class="banner">
            <div class="clm">
                <!-- 主图展示区 -->
                <div class="main-img-wrapper" id="mainImgWrapper">
                    <!-- 单图模式，需要双图并排时新增以下注释中的代码即可，可自定义超链接地址 -->
                    <a href="##">
                        <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" id="mainProductImg" alt="产品主图">
                    </a>
                    <!-- 双图展示示例
                    <a href="##">
                        <img src="你的第二张产品图地址" alt="产品第二角度图">
                    </a>
                    -->
                </div>
                <!-- 缩略图切换区，可自行新增更多缩略图，修改data-img属性为对应主图地址即可 -->
                <div class="thumbnail-list">
                    <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" class="thumb-item active" data-img="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="缩略图1">
                    <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" class="thumb-item" data-img="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="缩略图2">
                    <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" class="thumb-item" data-img="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="缩略图3">
                </div>
            </div>
            <div class="clm">
                <p>Home / Morning Safari</p>
                <h1>Morning Safari</h1>
                <h4> <label> Total:</label><label class="total Price"></label> </h4>
                <div class="counter1">
                    <Label class="adults">Adults</Label>
                    <div class='down' onclick='decreaseCount(event, this)'>-</div>
                    <input type='text' value='1' readonly>
                    <div class='up' onclick='increaseCount(event, this)'>+</div>
                </div>
                <div class="counter2">
                    <Label class="children">Children</Label>
                    <div class='down' onclick='decreaseCount2(event, this)'>-</div>
                    <input type='text' value='0' readonly>
                    <div class='up' onclick='increaseCount(event, this)'>+</div>
                </div>
                <div class="container">
                    <input type="radio" name="occupancy" id="private" checked="checked">
                    <label for="private">Private</label>
                    <input type="radio" name="occupancy" id="shared">
                    <label for="shared">Shared</label>
                </div>
            </div>
        </div>
    </body>
</html>

使用说明 #

• 需要双图并排展示时，取消代码中main-img-wrapper内双图展示示例的注释，修改对应图片地址和超链接即可
• 缩略图可自行扩展，修改对应src属性为缩略图地址、data-img属性为对应要切换的主图地址即可

内容的提问来源于stack exchange，提问作者MMunir. Asif