我最近在做一个关于aespa的网页，遇到了挺头疼的布局问题：为了让文本和图片列表并排，我一直得用绝对定位来硬调位置。虽然在首页（index.html）里我勉强找到办法绕开了绝对定位的坑，但到了成员详情页（karina.html），我彻底卡壳了——我需要文本内容直接放在成员列表的右侧，但怎么都没法实现正常的并排布局，只能靠绝对定位凑活，可这样的布局在不同屏幕下很容易乱掉。

目前的页面效果和我想要的排版差距很大，我实在不知道该怎么调整CSS，让文本和成员列表能自然地横向排列，不用依赖绝对定位这种不灵活的方式。

下面是我当前的代码：

CSS 代码 #

body { background-color: #1d0035; }

/*GROUP PAGE/FRONT PAGE */
.members-list { margin-top: 10%; }
.aespalogo { width: 15%; height: auto; float: left; display: block; margin-left: 42px; }
.content { padding: 1%; }
.members ul li img { width: 310px; height: 160px; }
ul { list-style-type: none; }

.topnav ul li { margin: 0 15px; font-size: 25px }
.topnav { display: inline-block; margin: 0; padding: 10px; align-items: center; position: absolute; top: 30px; right: 10px; padding: 10px; width: auto; }
.topnav ul { position: relative; }
.topnav ul { margin: 0; padding: 10px; list-style: none; display: flex; gap: 20px; background: rgba(255,255,255,0.85); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.topnav ul li { position: relative; font-size: 20px; }
.topnav ul .dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 160px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 100; padding: 8px 0; opacity: 0; pointer-events: none; }
.topnav ul li:hover > .dropdown { display: block; opacity: 1; pointer-events: auto; }
.topnav ul .dropdown li { display: block; margin: 0; padding: 0; }
.topnav ul .dropdown a { display: block; padding: 12px 24px; color: #433E42; text-decoration: none; white-space: nowrap; font-size: 18px; border-radius: 4px; }
.topnav ul .dropdown a:hover { background: #dc4eff; color: #fff; }
.topnav a { text-decoration: none; color: #433E42; padding: 8px 16px; border-radius: 4px; }
.topnav a:hover { background: #dc4eff; color: #fff; }

/*GROUP PAGE/FRONT PAGE CONTAIN*/
.intro { /* 6/5/25 I used vw as a way to minimize the font when the window is smaller*/ position: absolute; top: 45%; right: 5%; width: 90%; max-width: 600px; display: flex; flex-direction: row; align-items: flex-start; font-size: 1.5vw; font-family: 'Renogare Soft', sans-serif; font-weight: 400; font-style: normal; }
.intro h1 { margin: 0; font-weight: 700; color: #f0a4ff; text-shadow: 3px 3px 10px #b23eff; text-align: right; }

.member-img { position:relative; display: inline-block; transition: transform 0.3s; }
.member-img img { transition: transform 0.3s, box-shadow 0.3s; border-radius: 16px; display: block; }
.member-img .see-member { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ff04c0; padding: 10px 24px; border-radius: 24px; font-size: 1.2em; opacity: 0; pointer-events: none; transition: opacity 0.3s; font-family: 'Renogare Soft', sans-serif; font-weight: bold; letter-spacing: 1px; text-align: center; }
.member-img:hover img { transform: scale(1.12); box-shadow: 0 8px 32px rgba(204, 0, 255, .5); z-index: 2; }
.member-img:hover .see-member { opacity: 1; }

.groupinformation { /* 6/5/25 I had made th einformation have a white rounded rectangle and imported the fonts I also formatted the text to wrap with the box as it wouldn't I searched up how to do it and experimented with different ways */ display: inline-block; margin-left: 1%; margin-top: 0; width: 97%; height: fit-content; text-align: left; background: #ffffff; border-radius: 24px; padding: 24px 25px; box-shadow: 0 4px 24px rgba(255, 255, 255, 0.15); max-width: 100vw; box-sizing: border-box; word-break: break-word; word-wrap: break-word; hyphens: auto; font-size: 1vw; font-family: 'Renogare Soft', sans-serif; font-weight: 400; font-style: normal; text-shadow: rgb(134, 35, 158,0.25) 2px 2px 2px ; margin-bottom: 1%; }

.groupgallery { /* 6/5/25 I had mad e agallery to show what the look like it is placed bside the information, i formatted it into a grid*/ position:relative; float: right; top: 96%; right: 5%; display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; column-gap: 30px; }
.groupgallery img { width: 105%; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.groupgallery img:last-child { /* 6/5/25 this makes the aespa 7th picture go be as wide as the two columns combined*/ grid-column: 1 / span 2; height: 350px; width: 102%; padding-top: -20px; }

.aespavideo { /* 6/5/25 I added a video as a way to fill up space */ top: 157%; margin-left: 2%; position: inline-block; }

/*GROUP PAGE/FRONT PAGE */
#main-info-style { position: relative; padding: 40px 0 0 25%; }
#main-info-style h1 { color: #fff; font-size: 10vw; position: absolute; left: 25%; top: 20%; display: block; }
#main-info-style p { color: #fff; font-size: 2vw; line-height: 1.4; padding: 5px 24px; margin: 0; position: absolute; left: 25%; top: 50%; height: auto; }

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karina | aespa</title>
</head>
<body>
    <!-- 导航栏 -->
    <div class="topnav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li>
                <a href="#">Members</a>
                <ul class="dropdown">
                    <li><a href="karina.html">Karina</a></li>
                    <!-- 其他成员链接 -->
                </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Videos</a></li>
        </ul>
    </div>

    <!-- Logo -->
    <img src="aespa-logo.png" alt="aespa Logo" class="aespalogo">

    <!-- 成员列表与文本区域 -->
    <div class="members-list">
        <ul class="members">
            <li class="member-img">
                <img src="karina-profile.jpg" alt="Karina">
                <div class="see-member">See Profile</div>
            </li>
            <!-- 其他成员项 -->
        </ul>

        <!-- 需要与成员列表并排的文本内容 -->
        <div class="intro">
            <h1>Karina</h1>
            <p>这里是Karina的详细介绍文本，我需要这部分内容能放在成员列表的右侧，不用依赖绝对定位硬调位置</p>
        </div>
    </div>
</body>
</html>

我试过在首页用flex布局调整，但到了成员页面，因为结构不同，之前的方法完全不管用。现在真的很困惑，不知道该怎么修改CSS，让文本和成员列表能不用绝对定位就实现并排，而且还能适配不同屏幕尺寸。

内容来源于stack exchange