Flex布局下无法将头部链接和图片右移的技术求助

问题根源 #

你的.cont容器用了flex-direction: column，这种布局下子元素默认宽度是自身内容的宽度，所以即使给.head或.image设置对齐属性，也会因为元素没占满容器宽度而看不到效果。另外，HTML里用数字开头的类名（.1、.2、.3）不符合CSS规范，会导致样式无法正常生效。

解决步骤 #

1. 头部链接右对齐 #

给.head添加两个关键属性，同时修正类名：

• width: 100%：让容器占满父元素宽度
• justify-content: flex-end：让内部链接向右对齐

修改后的.head样式：

.head {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
  gap: 1.5rem; /* 可选：给链接之间添加间距 */
}

HTML里的类名改成合法格式：

<div class="head">
  <div class="link-1">header link one</div>
  <div class="link-2">header link two</div>
  <div class="link-3">header link three</div>
</div>

2. 图片右对齐 #

两种简洁方法任选其一：

方法一：给容器设置宽度和对齐

.image {
  display: flex;
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  justify-content: flex-end;
}

方法二：直接给图片设置自动左外边距

.image img {
  margin-left: auto;
  width: 100%; /* 可选：让图片自适应容器宽度 */
  height: auto;
}

完整修改后的代码 #

CSS #

.cont {
  display: flex;
  flex-direction: column;
  background-color: black;
  color: aliceblue;
  position: relative;
  padding: 0 1rem; /* 可选：添加左右内边距避免内容贴边 */
}

.head {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
  gap: 1.5rem;
}

.image {
  display: flex;
  max-width: 300px;
  max-height: 300px;
}

.image img {
  margin-left: auto;
  width: 100%;
  height: auto;
}

HTML #

<div class="cont">
  <div class="logo">
    <div class="header">
      <h1>Header Logo</h1>
    </div>
  </div>
  <div class="head">
    <div class="link-1">header link one</div>
    <div class="link-2">header link two</div>
    <div class="link-3">header link three</div>
  </div>

  <div>
    <h2>This is a website</h2>
  </div>
  <div class="web">this website has some subtext that goes here under main title. it's a smaller font and the color is lower contrast
  </div>
  <div class="image"><img src="https://english.cdn.zeenews.com/sites/default/files/styles/zm_700x400/public/2022/08/08/1075018-untitled-design-17.jpg" alt="cat">
  </div>
</div>
<div>
  <h4>Some random information</h4>
</div>
<div></div>
<div>this is some subtext under an illustration or image</div>
<div></div>
<div>this is some subtext under an illustration or image</div>
<div></div>
<div>this is some subtext under an illustration or image</div>
<div></div>
<div>this is some subtext under an illustrationor image</div>
<div>this is an inspiring quote, or a testimonial from a customer. Maybe its just filling up space or maybe people will actually read it. who knows? all i know is that it looks nice.
</div>
<div>
  <h2>-thor, God of Thunder</h2>
</div>
<div>call to action! its time!</div>
<div>sign up for our product by clicking that button right over there!
</div>
<div>sign up</div>

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