jqueryを使用してイメージとヘッダーを追加する方法

Question

私はこれをAjaxリクエストから得たデータに持たせ、それらを同じ行に表示したいと思います。私は項目が同じ行に表示されていけないことをやるときここに私のコードは

HTML

<div id="one"></div> 

jqueryの

$getJSON(...,function(data){ 

$("#one").append("<img src="+ data.image_icon +">"+"<h3>" +data.title"</h3>") 

}) 

です。両方を同じ行に表示させるにはどうすればよいですか？

img { 
    display: inline-block; 
    } 

あなたのCSSの

Answer 1

と

var image_icon = 'http://placehold.it/140x158'; 
 
var title = 'title'; 
 
$("#one").append("<img src='" + image_icon + "'>" + "<h3>" + title + "</h3>");

h3 { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one"></div>

Answer 2

試みはブロックされた要素です。

displayプロパティを上書きする必要があります。

これをお試しください：要素h3のために使用display: inline-block;

h3 { display: inline-block; } 
img { display: inline-block; } 

Answer 3

h3を追加