如何在 CSS 的同一行上對齊包含文本的 div 和包含圖像的 div？

Question

所以我有一個包含兩個子 div 的父 div。 一個 div 子級包含文本，一個 div 子級包含圖像。 我試圖把它們放在同一條線上。 我已經嘗試了很多東西，但它們似乎不能保持在同一條線上。 如果我對父 div 使用 white-space: nowrap，則文本 div 中的文本將超出 div 邊框。

 CSS: #block_container { width: 100%; height: 400px; } #introduction { width: 60%; height: 400px; float: left; display: inline-block; } #image { width: 40%; height: 400px; float:right; display: inline-block; }

 HTML: <div id="block_container"> <div id = "introduction"> <h1 id="title">something</h1> <p id="paragraph">something</p> </div> <div id = "image"> <img src="image.jpg" width="536px" height="400px" align = "right"/> </div> </div>

Answer 1

從圖像和 div 中刪除 inline-block，並使它們的顯示樣式內聯。

 CSS: #block_container { width: 100%; height: 400px; } #introduction { width :59% height: 400px; float: left; border:red solid } #image { width: 39%; height: 400px; float:right; } #introduction #image { display:inline }

 HTML: <div id="block_container"> <div id = "introduction"> <h1 id="title">something</h1> <p id="paragraph">something</p> </div> <div id = "image"> <img src="image.jpg" /> </div> </div>

沒有寬度的div

 CSS: #block_container { width: 100%; height: 400px; } #introduction { height: 400px; float: left; border:red solid } #image { width: 39%; height: 400px; } #introduction #image { display:inline }

 HTML: <div id="block_container"> <div id = "introduction"> <h1 id="title">something</h1> <p id="paragraph">something</p> </div> <div id = "image"> <img src="image.jpg" /> </div> </div>