如何在CSS的同一行上对齐包含文本的div和包含图像的div？

Question

因此，我有一个包含两个子div的父div。一个div子代包含文本，一个div子代包含图像。我正在尝试将它们放在同一行。我已经尝试了很多东西，但是它们似乎无法保持一致。如果我对父div使用空格：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中删除内联块，并使其内嵌显示样式。

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>