Html 重新创建星巴克网站时,无法将文本和图像放在同一条线上

Html 重新创建星巴克网站时,无法将文本和图像放在同一条线上,html,css,flexbox,Html,Css,Flexbox,我正在尝试重新创建星巴克网站的html/css部分。事情进展顺利,但我遇到的问题是,我无法将文本与图像文件放在同一行。星巴克官方网站()的文字说明和图片在同一行。我的代码中缺少了什么?如果这可以用flexbox属性解决,那就太好了。谢谢 html{ 字体系列:noto sans jp,sans serif; } 身体{ 显示器:flex; 柔性包装:包装; } img{ 宽度:500px; } h1{ 字体大小:40px; 字母间距:5px; } .标题{ 背景色:rgb(22125247);

我正在尝试重新创建星巴克网站的html/css部分。事情进展顺利,但我遇到的问题是,我无法将文本与图像文件放在同一行。星巴克官方网站()的文字说明和图片在同一行。我的代码中缺少了什么?如果这可以用flexbox属性解决,那就太好了。谢谢

html{
字体系列:noto sans jp,sans serif;
}
身体{
显示器:flex;
柔性包装:包装;
}
img{
宽度:500px;
}
h1{
字体大小:40px;
字母间距:5px;
}
.标题{
背景色:rgb(22125247);
填充:20px;
字体大小:20px;
文本对齐:居中;
}
.明星{
背景色:rgb(226,0,0);
颜色:白色;
}
.饮料{
背景色:rgb(226,0,0);
颜色:白色;
}
.饼干{
背景色:rgb(0,54,24);
颜色:白色;
}
.卡片{
背景色:rgb(22125247);
颜色:黑色;
}
.人{
背景色:rgb(0,54,24);
颜色:白色;
}
.条款{
文本对齐:居中;
填充:30px;
}
桌子{
字体大小:20px;
线高:50px;
边框底部:1px纯黑;
填充:30px;
}

祝你得到最热烈的回报
星巴克®奖励会员现在可以在应用程序中以任何方式支付费用,并可以收集星星兑换免费假日爱好者。非常愉快*

获取应用程序

顺其自然 有这么多方便的方式来获得你的节日最爱

探索季节性饮料

烈性酒 新的蔓越莓橘子烤饼:由奶油干酪、干蔓越莓、橘子皮和少量香草糖衣制成

现在点菜

兴高采烈 获得4500颗红星是超级明星化 使用Starbucks®Rewards Visa®卡第一年的介绍年费为0美元。此外,星巴克为持卡会员提供的独家优惠不会过期。现在这是超级淀粉化**

了解更多

推动我们的民主 了解我们的合作伙伴(员工)如何参与公民参与,让他们的声音被听到,并加强他们的社区

阅读更多

*星巴克奖励优惠可在参与星巴克商店获得。有些限制适用。见Starbucks.com/terms

**根据星巴克奖励计划,只要您的星巴克®奖励Visa®信用卡帐户是开放的,您所赢得的明星不会过期。如果您的Starbucks®Rewards Visa®信用卡帐户因任何原因关闭,您的Stars将在六(6)个月内到期 在该帐户关闭的日历月之后。大通信用卡由美国大通银行发行。存款产品由美国大通银行成员FDIC提供

关于我们 事业 社会影响 商业伙伴 订购方式 我们的遗产 文化和价值观 道德采购 房东支持中心 网上订购 我们的咖啡 包容、多样性和公平 引领可持续发展 补给 下载应用程序 故事和新闻 大学成就计划 加强社区 公司礼品卡销售 传送 投资者关系 美国职业 创造机会 办公和餐饮咖啡 谷歌助手 政策和标准 国际职业 全球社会影响报告 客户服务
  • 隐私政策
  • 使用条款
  • CA供应链法
  • 提交你的想法
  • 曲奇偏好
©2020星巴克咖啡公司。版权所有


带有标签
h1
p
的文本必须包装在容器
div
)中,以便使用
flex
规则正确分发图片和文本

对于flex规则,我创建了一个选择器:

main section:not(:last-of-type) {
  display: flex;
  align-items: center;
}
:not(:type的最后一个)
-这意味着该规则将应用于除最后一个容器外的所有指定容器。因为后者不是示例中图片的
部分

有必要吗

html{
字体系列:noto sans jp,sans serif;
}
身体{
显示器:flex;
柔性包装:包装;
}
主要{
}
主要部分:非(:类型的最后一个){
显示器:flex;
对齐项目:居中;
}
.text_部分{
左边距:50像素;
}
img{
宽度:500px;
}
h1{
字体大小:40px;
字母间距:5px;
}
.标题{
背景色:rgb(22125247);
填充:20px;
字体大小:20px;
文本对齐:居中;
}
.明星{
背景色:rgb(226,0,0);
颜色:白色;
}
.饮料{
背景色:rgb(226,0,0);
颜色:白色;
}
.饼干{
背景色:rgb(0,54,24);
颜色:白色;
}
.卡片{
背景色:rgb(22125247);
颜色:黑色;
}
.人{
背景色:rgb(0,54,24);
颜色:白色;
}
.条款{
文本对齐:居中;
填充:30px;
}
桌子{
字体大小:20px;
线高:50px;
边框底部:1px纯黑;
填充:30px;
}

祝你得到最热烈的回报
星巴克®奖励会员现在可以在应用程序中以任何方式支付费用,并可以收集星星兑换免费假日爱好者。非常愉快*

获取应用程序

顺其自然 有这么多方便的方式来获得你的节日最爱

探索季节性饮料

巴基