网站开发求助：如何用HTML/CSS实现图片相对文本居右

一、解决图片居右的布局问题 #

你当前的header设置了grid-template-columns: repeat(2, 1fr)，但仅在其中放置了一个.content容器，导致网格布局未生效；同时图片嵌套在.content内部，使用align="right"这类废弃HTML属性也无法实现预期效果。可通过以下两种方案修复：

方案1：利用现有header网格布局调整结构 #

将图片从.content中移出，作为header的第二个子元素，让网格自动分配左右空间：

<header class="container">
  <div class="content">
    <span class="blur"></span>
    <span class="blur"></span>
    <h4>WELCOME TO THE PyProject-Assistant WORLD</h4>
    <h1>Hi, I'm <span>Max</span>, young programmer</h1>
    <p>who is trying to enroll in MEPhI</p>
    <button class="btn">Download</button>
    <div class="code">
      <h4>while (alive) {<br> eat();<br> sleep();<br> code();<br> repeat();<br>}</h4>
    </div>
  </div>
  <!-- 图片移至此处作为网格第二列 -->
  <div class="header-image">
    <img src="https://abrakadabra.fun/uploads/posts/2022-02/1646056685_22-abrakadabra-fun-p-frilans-art-49.png" alt="Programmer illustration">
  </div>
</header>

添加对应CSS：

.header-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-image img {
  max-width: 400px; /* 限制图片最大宽度，避免超出容器 */
}

方案2：在.content内部用Flex布局实现左右排列 #

若不想调整HTML结构，修改.content的CSS为Flex布局：

.content {
  color: #fff;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
/* 文本部分占据剩余空间 */
.content-text {
  flex: 1;
}
/* 图片容器固定宽度 */
.content .image {
  flex-shrink: 0;
  max-width: 400px;
}

同时给.content内的文本套一个容器：

<div class="content">
  <div class="content-text">
    <span class="blur"></span>
    <span class="blur"></span>
    <h4>WELCOME TO THE PyProject-Assistant WORLD</h4>
    <h1>Hi, I'm <span>Max</span>, young programmer</h1>
    <p>who is trying to enroll in MEPhI</p>
    <button class="btn">Download</button>
    <div class="code">
      <h4>while (alive) {<br> eat();<br> sleep();<br> code();<br> repeat();<br>}</h4>
    </div>
  </div>
  <div class="image">
    <img src="https://abrakadabra.fun/uploads/posts/2022-02/1646056685_22-abrakadabra-fun-p-frilans-art-49.png" alt="Programmer illustration">
  </div>
</div>

二、代码优化建议 #

1. 语义化标签优化 #

• 导航栏的Support Me按钮若为跳转链接，建议改为<a class="btn" href="#">Support Me</a>，更符合语义规范。
• 代码块改用<pre><code>标签替代<h4>，更适合展示代码，同时移除<br>标签保留原始换行：

  <div class="code">
    <pre><code>while (alive) {
  eat();
  sleep();
  code();
  repeat();
  

}

``` 对应CSS调整： ```css .code code { color: #fff; font-family: 'Courier New', monospace; line-height: 1.5; } ```

2. 移除废弃属性 #

删除<div class="image" align="right">中的align="right"，该属性已废弃，所有布局逻辑用CSS实现。

3. 完善图片可访问性 #

为所有图片添加alt属性，提升屏幕阅读器兼容性：

<img src="https://ic.wampi.ru/2023/10/30/logo-GkOqSQerJ-transformed.png" alt="PyProject-Assistant Logo" border="0">

4. CSS变量统一管理颜色 #

将重复使用的颜色提取为CSS变量，方便后续维护修改：

:root {
  --primary-color: #1c9eb5;
  --primary-hover: #1a8b9f;
  --accent-color: #23b5ce;
  --bg-color: #18181B;
  --text-color: #fff;
}

替换CSS中对应颜色值，例如：

body {
  background-color: var(--bg-color);
}
.link a::after {
  background-color: var(--accent-color);
}

5. 响应式布局优化 #

添加媒体查询适配小屏幕，避免导航栏拥挤：

@media (max-width: 768px) {
  .nav-links {
    display: none; /* 后续可改为汉堡菜单实现移动端导航 */
  }
  header {
    grid-template-columns: 1fr; /* 移动端改为单列布局 */
    text-align: center;
  }
  .content {
    flex-direction: column; /* 移动端文本与图片垂直排列 */
  }
}

6. 清理冗余代码 #

• 移除img样式中的cursor: default，无特殊需求时无需修改图片默认光标。
• 调整.content p的padding-bottom: 100px为合理值（如2rem），避免布局间距失衡。

内容的提问来源于stack exchange，提问作者TheSawe