0

したがって、基本的にハイパーリンク、画像、ボタン、および脇で構成される記事タグがあります。

画像はインラインでレンダリングされ、横に横に積み重ねられます。これを行うことができるようにするために、これは私がやっていることです:

<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 に望ましい効果があり、インラインでスタックされますが、aside タグにはそのような効果はなく、HTML タグの下にレンダリングされます。

4

2 に答える 2

0

これはあなたが目指しているものですか？

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

...味にマージンとパディングを追加します。

于 2012-06-24T00:32:20.337 に答える
0

まず、タイプミスがあります: あなたのクラスは " 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>
于 2012-06-24T00:33:39.213 に答える