將文字放在圖像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; 
}