我在css方面有问题.目前正在努力实现两件事.
-
I need for text to always be aligned with navbar first item. No matter the browser width Showned in pictures. .
-
我需要使图像的整个右侧成为全宽.所以它的宽度应该和导航栏背景的宽度相同.基本上宽度应该是整个右侧.
我试着用包装纸.但这似乎并不是一个正确的修复方法.老实说,我认为我缺乏解决这个问题的具体知识.所以我无法产生和try 新的 idea .
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浏览器上的第三个按钮以获得更好的观看体验.