イメージ、段落、そして別のイメージを同じ行に入れる方法は？

-1

私はイメージ、段落、そして別のイメージをhtml/cssの1行に入れたいと思っています。イメージ、段落、そして別のイメージを同じ行に入れる方法は？

私はこのように動作させました。

<html> 
<body> 
     <span style="float:left; display: inline-block; width: 20%;"> 
     <img src="https://pbs.twimg.com/profile_images/762369348300251136/5Obhonwa.jpg" 
     width="90" height="110" /> 
     </span> 
     <span style="float:left;width: 60%;"> 
      <p style="float:left; display:block;">Lorem ipsum dolor sit amet,  
       consectetur adipiscing elit. Integer arcu mauris, ullamcorper et 
       ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar 
       lacus.</p> 
     </span> 
     <span style="float:right; width 20%;"> 
      <img src="https://www.google.ca/doodle4google/images/splashes/featured.png" width="90" height="110"> 
     </span> 
</body> 
</html>

私は私が外部CSSシートやスタイルのタグでそれを行うことができます知っているが、私は3つのすべてをしなければならないので、それは割り当てのためです。ここで

出典

2016-10-24 sam yatsula

は一例です：https://jsfiddle.net/sp6ykv66/

HTML：

<img src="https://dummyimage.com/100x100/000/fff" alt=""> 
<p class="inline">Lorem Ipsum</p> 
<img src="https://dummyimage.com/100x100/000/fff" alt="">

CSS：

.inline{display: inline-block;}

出典

2016-10-24 13:50:16 Okba

.parent{ 
display:flex; 
justify-content:center; 
align-items:center; 
flex-direction:row; 
} 

.children{ 
// whatever you want 
// your paragraph and imgs need to be children of parent 
}

ますので、段落とIMGSはdivのクラス= "親にする必要があります"

そのディスプレイ：フレックスは別名のdivの子供段落とIMGS

注影響：（彼らはデフォルトでブロックされているとして、H4要素に対して）あなたが使用することができますいずれかの電話

出典

2016-10-24 13:51:10 eiipaw

にイムを

display: inline-block;

それとも、 rght /左に要素をフロートすることができます

float: left;

だけ

後のフロートをクリアすることを忘れないでください

clear: left;

または

h4{width:80px;float:left}

<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4> 
 
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/></h4>

それを試してみてください

出典

2016-10-24 13:56:56

イメージ、段落、そして別のイメージを同じ行に入れる方法は？

答えて

関連する問題