行內塊元素沒有按預期的方式出現

我想用兩個不同的div來對齊使用內聯塊，但它們卻是像塊狀元素一樣堆疊。具體來說，它們是包含圖像的wrapper_image div，以及包含一些文本信息的about_div。行內塊元素沒有按預期的方式出現

我有以下HTML：

<body> 
    <header> 
     ... header information here 
    </header> 
    <div class="wrapper_image"> 
     <img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo"> 
    </div> 
    <div class="about_div"> 
     <h3 id="about_me">About Me</h3> 
     <p id="about_me_info"> 
      Text 
     </p> 
     <p id="about_me_info"> 
      Some more text 
     </p> 
    </div> 
    <footer> 
     <p> 
      &copy; Name 
     </p> 
    </footer> 
</body>

和CSS：

.wrapper_image { 
    display: inline-block; 
    vertical-align: top; 
} 

.about_div { 
    display: inline-block; 
    vertical-align: top; 
} 

.profile-photo { 
    max-width: 350px; 
    border-radius: 100%; /* adds rounded corners to an element */ 
} 

#about_me { 
    font-size: 2em; 
} 

#about_me_info { 
    font-size: 1.5em; 
}

來源

2016-03-04 dsideb

一切似乎OKS。我把演示圖片，顯示在Chrome，這是什麼樣子

的圖像和文字是inline-block的，並似乎確定

來源

2016-03-04 21:39:36

，所以我想通了這個問題：在文本第二個div不包裝;相反，它正在脫離內聯塊並將所有內容移到第二行。我只需要找出如何防止這一點。 – dsideb

我發現了一個解決方案，但不知道這是否技術上正確/廣泛使用。我只是把第二個div作爲第一個孩子。這樣，他們自動在同一條線上，第二個不能中斷。 – dsideb

行內塊元素沒有按預期的方式出現

回答

相關問題