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

Question

这是现有的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>

Answer 1

您必须将 #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>