gpt4 book ai didi

html - 需要获取并排排列的各种产品的图片和描述,而不是彼此下方

转载 作者:行者123 更新时间:2023-11-28 08:57:43 24 4
gpt4 key购买 nike

这是现有的CSS:

.menuguide_wrap {
width: 700px;
border: 0;
padding-left: 30px;
}

.menuguide_product {
width: 150px;
padding-bottom:15px;
height: 100%;
display: inline;
align: center;
}

这是页面上的 html。我想让图像下方的两个图像和文本从左到右彼此相邻排列......而不是像现在这样上下排列。这是实时查看页面的链接.. www.grabyourgreens.com/menu-guide/:

<div id="menuguide_wrap" align="center">
<div id="menuguide_product"><a href="image"><img src="image-path" <br />
G I -CUCUMBER&nbsp;<br />
<span style="color: #99cc00;">ORIGINAL RECIPE</span><br />
Slightly caffeinated, sweet.</a></div>
<div id="menuguide_product"><a href="image"><img src="image-path"/><span style="font- size: large;"><br />
G II-SPINACH<br />
<span style="color: #99cc00;">ORIGINAL RECIPE</span><br />
(50-55% Greens).</span></a></div>
</div>
</div>

最佳答案

您必须将 #menuguide_product 显示为 inline-block

.menuguide_wrap {
width: 700px;
border: 0;
padding-left: 30px;
}
#menuguide_product {
width: 150px;
padding-bottom: 15px;
height: 100%;
display: inline-block;
text-align: center;
vertical-align: top;
}
<div id="menuguide_wrap" align="center">
<div id="menuguide_product">
<a href="image">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1">
<br />G I -CUCUMBER&nbsp;
<br />
<span style="color: #99cc00;">ORIGINAL RECIPE</span>
<br />Slightly caffeinated, sweet.</a>
</div>
<div id="menuguide_product">
<a href="image">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" /><span style="font- size: large;"><br />
G II-SPINACH<br />
<span style="color: #99cc00;">ORIGINAL RECIPE</span>
<br />(50-55% Greens).</span>
</a>
</div>
</div>
</div>

关于html - 需要获取并排排列的各种产品的图片和描述,而不是彼此下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27067553/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com