如何让亚马逊评论分布在页面中部图片的左右两侧

各位好，我是首次发帖的编程新手。我希望将几条亚马逊评论放置在页面中部图片的左右两侧，以此避免页面出现无意义的空白区域。我当前使用HTML搭配外部CSS和JavaScript开发页面，相关代码如下：

原JavaScript代码 #

let data = [
    {
        review: 'I finished this book in three days because I COULD NOT PUT IT DOWN! I read page one, and I was a goner! If you enjoy romance, but also appreciate unpredictability, plot twists, with a side steam, look no further. Very much looking forward to the next book!'
    },
    {
        review: 'A great romance! The plot is very interesting and keeps you turning the pages. More and more romance today is all about lust and spice, but grateful for authors who still believe plot is important. This is a quick read. Very refreshing and clean (it does have 2 spicey scenes). Can\'t wait for the next book!'
    },
    {
        review: 'Finished the book in under 24 hours. It\'s absolutely riveting. Apparently it\'s the author\'s first book - and honestly I see a lot of talent in this young writer. There\'s lots of twists and turns that leaves me in suspense. I can also appreciate the military references so that it also has an appeal to the male audience. My wife absolutely loves this book and is fully immersed into the storyline - she describes it as a masterpiece and the fact that she got a sneak peek of the next book at the very end leaves her in high suspense and anxious for the next one to get published.'
    },
    {
        review: 'Good quick read with twists and a good ending!'
    },
    {
        review: 'A great romance! The plot is very interesting and keeps you turning the pages. More and more romance today is all about lust and spice, but grateful for authors who still believe plot is important. This is a quick read. Very refreshing and clean (it does have 2 spicey scenes). Can\'t wait for the next book!'
    }
];

const info = document.querySelector('#info')

let details = data.map(function(item) {
    return ('<div>' + item.review + '</div>')
})

info.innerHTML = details.join('\n')

原CSS代码 #

body {
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100hv;
}

#topBanner {
    background-color: #424347;
    color: white;
    text-align: center;
    padding: 25px 0 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-transform: uppercase;
    width: auto;
    margin: auto;
}

.title {
    font-family: X Typewriter;
    font-size: x-large;
    letter-spacing: 2em;
    text-indent: 2em;
}

.subTitle {
    font-family: X Typewriter;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 50%; */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#info {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

#info div {
    padding: 3rem;
    background: lightgrey;
    margin: 0.5rem;
    border-radius: 10px;
    font-size: 1.2rem;
    text-align: center;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Uncovered: A Novel</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <section id="topBanner">
            <div>
                <h1 class="title">Uncovered</h1>
                <h2 class="subTitle">A Novel</h2>
            </div>
        </section><br><br><br><br>
        <img src="images/bookCoverMedium.jpg" alt="">
        <div id="info"></div>
        <script src="uncovered.js"></script>
    </body>
</html>

通过CSS Grid布局可以轻松实现评论在图片左右两侧的效果，具体修改如下：

1. 调整HTML结构 #

新增容器包裹图片和左右评论区，让布局更规整：

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Uncovered: A Novel</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <section id="topBanner">
            <div>
                <h1 class="title">Uncovered</h1>
                <h2 class="subTitle">A Novel</h2>
            </div>
        </section>
        <!-- 新增容器整合图片与评论 -->
        <div id="content-container">
            <div class="reviews-column" id="left-reviews"></div>
            <img src="images/bookCoverMedium.jpg" alt="Uncovered: A Novel">
            <div class="reviews-column" id="right-reviews"></div>
        </div>
        <script src="uncovered.js"></script>
    </body>
</html>

2. 修改JavaScript拆分评论 #

将评论均匀分配到左右两个区域，避免单侧内容过多：

let data = [
    {
        review: 'I finished this book in three days because I COULD NOT PUT IT DOWN! I read page one, and I was a goner! If you enjoy romance, but also appreciate unpredictability, plot twists, with a side steam, look no further. Very much looking forward to the next book!'
    },
    {
        review: 'A great romance! The plot is very interesting and keeps you turning the pages. More and more romance today is all about lust and spice, but grateful for authors who still believe plot is important. This is a quick read. Very refreshing and clean (it does have 2 spicey scenes). Can\'t wait for the next book!'
    },
    {
        review: 'Finished the book in under 24 hours. It\'s absolutely riveting. Apparently it\'s the author\'s first book - and honestly I see a lot of talent in this young writer. There\'s lots of twists and turns that leaves me in suspense. I can also appreciate the military references so that it also has an appeal to the male audience. My wife absolutely loves this book and is fully immersed into the storyline - she describes it as a masterpiece and the fact that she got a sneak peek of the next book at the very end leaves her in high suspense and anxious for the next one to get published.'
    },
    {
        review: 'Good quick read with twists and a good ending!'
    },
    {
        review: 'A great romance! The plot is very interesting and keeps you turning the pages. More and more romance today is all about lust and spice, but grateful for authors who still believe plot is important. This is a quick read. Very refreshing and clean (it does have 2 spicey scenes). Can\'t wait for the next book!'
    }
];

// 拆分评论为左右两部分
const midIndex = Math.ceil(data.length / 2);
const leftReviews = data.slice(0, midIndex);
const rightReviews = data.slice(midIndex);

// 生成评论卡片HTML
function buildReviewCards(reviews) {
    return reviews.map(item => `<div class="review-card">${item.review}</div>`).join('\n');
}

// 插入到对应容器
document.querySelector('#left-reviews').innerHTML = buildReviewCards(leftReviews);
document.querySelector('#right-reviews').innerHTML = buildReviewCards(rightReviews);

3. 重构CSS实现布局 #

用Grid实现三列布局，并添加响应式适配：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh; /* 修正原代码的100hv拼写错误 */
    padding: 2rem 1rem;
}

#topBanner {
    background-color: #424347;
    color: white;
    text-align: center;
    padding: 25px 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 2rem; /* 替换原有的多个<br>标签 */
}

.title {
    font-family: X Typewriter;
    font-size: x-large;
    letter-spacing: 2em;
    text-indent: 2em;
}

.subTitle {
    font-family: X Typewriter;
}

/* 核心三列网格布局 */
#content-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

img {
    max-width: 300px; /* 限制图片宽度，避免超出容器 */
    height: auto;
}

.review-card {
    padding: 2rem;
    background: lightgrey;
    margin-bottom: 1rem;
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* 小屏幕自动切换为垂直布局 */
@media (max-width: 900px) {
    #content-container {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    img {
        order: -1; /* 图片移到最上方 */
    }
}

修改说明 #

• 用三列Grid实现左右评论区、中间图片的布局，1fr让评论区自动填充剩余空间，auto保证图片自适应宽度
• 拆分评论避免单侧内容过长，平衡布局视觉效果
• 修正原CSS的拼写错误，用margin替代<br>标签，符合现代布局规范
• 添加响应式适配，小屏幕自动切换为垂直布局，保障移动端体验

内容的提问来源于stack exchange，提问作者rdev-byte