html - 试图堆叠一个就在图像旁边

Question

所以我有一个文章标签，它基本上由一个超链接、一个图像、一个按钮和一个旁白组成。

图像内联渲染图像，并在旁边堆叠旁边。为了能够做到这一点，这就是我正在做的事情：

<article class = "friends_for_job"> 
  <header><a href = "\">Title</a></header>
  <img src = "*.jpg"></img>
  <aside>
     <p> info info info </p>
     <p> info info info </p>
   </aside>
   <input type = "button" value = "share">
</article>

上面的css是：

.friend_for_job img{
display:block 
}
.friend_for_job aside{
display:inline;
}

现在这对我的 img 产生了预期的效果，将其内联堆叠，但对 side 标记没有这样的效果，并且它在 HTML 标记下方呈现。

Answer 1

这是你的目标吗？

.friends_for_job img { float:left; }
.friends_for_job aside { display:block; }

...根据口味添加边距和填充。

Answer 2

首先，您有一个错字：您的班级名为“ friend_for_job ”，但您使用的是“ friendS_for_job ”。而且你可以简单地使用它：

<style>
.friends_for_job img {
    float:  left; 
}
.friends_for_job aside {
    float:left;
}
</style>

<article class="friends_for_job"> 
  <header>
    <a href="">Title</a>
  </header>
  <img src="http://lorempixel.com/output/nature-q-c-640-480-7.jpg" alt="">
  <aside>
     <p> info info info </p>
     <p> info info info </p>
   </aside>
   <input type = "button" value = "share">
</article>