我在css方面有问题.目前正在努力实现两件事.

  1. I need for text to always be aligned with navbar first item. No matter the browser width Showned in pictures. example1. Example2

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

我试着用包装纸.但这似乎并不是一个正确的修复方法.老实说,我认为我缺乏解决这个问题的具体知识.所以我无法产生和try 新的 idea .

Image vizualization enter image description here

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浏览器上的第三个按钮以获得更好的观看体验.

推荐答案

Wrapper组件具有网格的情况下try 此解决方案.所以,我们的 idea 是创建3个专栏,并将内容仅放在2和3个专栏中.此外,将图像视图限制为2列.

enter image description here

Wrapper.tsx

import styled from "styled-components";

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

App.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>
  );
}

最后,我们需要在Navbar中添加一个属性grid-column: 2;,以保持导航链接居中.

Navbar.tsx

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

Edit dazziling-code

Css相关问答推荐

添加Angular 17的Stackblitz项目的Angular material 主题?

下拉面板未与Angular中的下拉文本框垂直对齐

臭虫?嵌套的css供应商前缀中断Chrome css解析

使用高图的背景大小渐变

如果 css 仅位于 razor 页面中的一页上,我是否仍应在 wwwroot 中写入或仅将其放在页面上?

为什么我的 React slick 轮播响应能力不起作用?

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

使用 place-content: center 的全宽 CSS 网格项目

Nativewind 的某些样式不适用于本机 (Android),但它们适用于网络

为什么 flexbox 中的 在应用居中时不会调整大小?

:required 或 [required] CSS Select 器

Tailwind:如何设置网格的自动填充?

使用border-radius时填充元素之间的空间

纯 CSS/JS 的 SVG 连续向内方形螺旋动画

CSS动画恢复默认

悬停效果:展开底部边框

flex-wrap 如何与 align-self、align-items 和 align-content 一起使用?

如何更改 HTML 输入标签的字体和字体大小?

模拟显示:React Native 中的内联

仅使用 CSS 交换 DIV 位置