将文字放在图像css旁边，似乎不起作用

Question

我在做什么错？ ：|

<div id=Content> 
        <h1>Welcome to the Sophia Centre press</h1> 
        <h2>New Publications Avaible Soon</h2> 

        <div id=Malta> 
        <img src ="images/Malta.jpg" alt="Malta" class="book"> 
        <p>Tore Lomsdalen</p> 
        <p><em>Sky and Purpose in Prehistoric Malta: Sun, Moon, and Stars at the Temples of Mnajdra.</p></em> 
        </div> 

        <div id=Greene> 
        <img src="images/Greene.png" alt="Greene" class="book"> 
        <p>Liz Greene</p> 
        <p><em>Magi and Maggidim: The Kabbalah in British Occultism 1860-1940.</em></p> 
        </div> 
        </div> 

和CSS

h1{ 
 
    
 
     padding: 1em; 
 
} 
 
h2{ 
 
     padding-left: 1cm; 
 
     color: #FF9900; 
 
} 
 
    
 

 
p { 
 
     clear: both; 
 
     margin: 0% 0% 0% 20%; 
 
} 
 
    
 
    
 
.book{ 
 
float: left; 
 
padding: 2em; 
 
}

它的外观1） 那应该怎么找2）

http://imgur.com/a/DqjnQ

我只是想在文本内容 HALP

Answer 1

旁边的图像移动你所寻找的是财产display: inline-block。

<img>标签是自然的内联，而无需将其设置，但因为你正在试图内联的<p>标签，你需要它们的容器设置为display:inline-block考虑到它。

代码更改：

 <div id=Malta> 
      <img src ="images/Malta.jpg" alt="Malta" class="book"> 
      <div class="textContainer"> 
       <p>Tore Lomsdalen</p> 
       <p><em>Sky and Purpose in Prehistoric Malta: Sun, Moon, and Stars at the Temples of Mnajdra.</p></em> 
      </div> 
     </div> 

CSS：

.textContainer { 
    display: inline-block; 
}