如何仅换行左侧内容

Question

我在 CSS 方面遇到了麻烦。目前正在努力实现两件事。

1. 我需要文本始终与导航栏第一项对齐。无论浏览器宽度如何，如图所示。 。

2. 我需要使图像整个右侧为全宽。所以它的宽度应该与导航栏背景的宽度相同。基本上宽度应该是整个右侧。

我尝试使用包装器。但这似乎不是包装器在这里的正确解决方案。老实说，我认为我缺乏解决这个问题的具体知识。所以我无法产生并尝试新的想法。

图像可视化

export const NavbarWrapper = styled.div`
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
  padding-right: 24px;
  padding-left: 24px;
`;


const ContainerStyled = styled.div`
  .content_container {
    display: flex;
  }

  .img {
    width: 100%;
  }
`;

export default function App() {
  return (
    <ContainerStyled>
      <Navbar />
      <NavbarWrapper>
        <div className="content_container">
          <p className="title">
            This should be responsive to navbar on all sizes
          </p>
          <img className="img" src="/image.jpg" alt="grey bridge" />
        </div>
      </NavbarWrapper>
    </ContainerStyled>
  );
}

可重现的示例为了进行检查，我建议单击 codeSandbox 浏览器上的第三个按钮以获得更好的查看体验。

Answer 1

在Wrapper组件具有网格的情况下尝试此解决方案。因此，想法是创建 3 列，并将内容仅放入 2 和 3 列中。另外，将图像视图限制为 2 列。

包装器.tsx

import styled from "styled-components";

export const NavbarWrapper = styled.div`
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 600px) 1fr;
`;

应用程序.tsx

import styled from "styled-components";
import { Navbar } from "./navbar/Navbar";
import { NavbarWrapper } from "./Wrapper";
import "./styles.css";

const ContainerStyled = styled.div`
  .content_container {
    display: flex;
    grid-column: 2 / 2 span;
  }
  .img {
    display: flex;
    flex: 1 0 calc(100% - 29vmin);
    max-height: 400px;
    object-fit: cover;
    overflow: hidden;
  }
`;
export default function App() {
  return (
    <ContainerStyled>
      <Navbar />
      <NavbarWrapper>
        <div className="content_container">
          <p className="title">
            This should be responsive to navbar on all sizes
          </p>
          <img className="img" src="/image.jpg" alt="grey bridge" />
        </div>
      </NavbarWrapper>
    </ContainerStyled>
  );
}

最后，我们需要grid-column: 2;向导航栏添加一个属性，以保持导航链接居中。

导航栏.tsx

ul {
  grid-column: 2; /* new line */
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
}