- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在同一个 div 中获取图像和文本我曾尝试使用 float left 和 display inline-block 但没有用我无法在我做的地方弄错。
我在 reactjs 中使用了样式组件。这些是我用过的样式组件
export const BannerContainer = styled.div`
width: 1280px
height: 448px
margin: auto
`
导出常量 BannerImageContainer = styled.div
导出常量 BannerImage = styled.img
height:448px
width:640px
float: left
padding:96px 96px 96px 96px
margin-left:128px
导出常量 BannerTextContainer = styled.div
height:448px
width:512px
margin-right:128px
float: left
导出常量 BannerHeaderText = styled.h1
width: 352px
height: 64px
padding-top:40px
font-family: Nunito
font-size: 28px
font-weight: 600
line-height: 1.14
text-align: center
导出常量 BannerParagraphContainer = styled.p
width: 389px
height: 72px
opacity: 0.38
font-family: Nunito
font-size: 16px
line-height: 1.5
text-align: center
color: #000000
导出常量 SeeAllProductsButton = styled.button
width: 160px
height: 32px
background-color: #7C6ECC
color: #FFFFFF
border: 0px
margin: 32px 112px
这是渲染它的代码 <BannerContainer>
<BannerImageContainer>
<BannerImage src={bannerImage} />
</BannerImageContainer>
<BannerTextContainer>
<BannerHeaderText>
Solving the most common problems in marketing
</BannerHeaderText>
<BannerParagraphContainer>
Exquisite codially mr happiness of neglected distrusts.
Boisterous impossible unaffected he me everything.
</BannerParagraphContainer>
<SeeAllProductsButton>See All Products</SeeAllProductsButton>
</BannerTextContainer>
</BannerContainer>
最佳答案
尝试使用 FlexBox!
非常简单的实现让你开始:
<div style={{display: 'flex'}}>
<div style={{flex: '1'}}>
<BannerImageContainer>
<BannerImage src={bannerImage} />
</BannerImageContainer>
</div>
<div style={{flex: '1'}}>
<BannerTextContainer>
<BannerHeaderText>
Solving the most common problems in marketing
</BannerHeaderText>
<BannerParagraphContainer>
Exquisite codially mr happiness of neglected distrusts.
Boisterous impossible unaffected he me everything.
</BannerParagraphContainer>
<SeeAllProductsButton>See All Products</SeeAllProductsButton>
</BannerTextContainer>
</div>
</div>
只是为了添加更多信息,这是一个非常流行的 css 组件(不特定于 React),用于正确对齐。只是谷歌搜索“flexbox”会给你很多信息,但一些具体的链接是here和 here
关于css - 向左浮动或显示内联 block 在样式组件 reactjs 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44148998/
我是一名优秀的程序员,十分优秀!