段落インラインimg

Question

イメージインラインで段落を整列する際に問題があります。

<p id="intro">blah blah blah lots of text.</p> 
<img src="macro.jpg" height="476" id="photograph" width="267" /> 

私はCSSでこの試みた：あなたは、それは流体ときにするために、次のように行うことができます

Answer 1

を助けてください...

#intro { 
    font-size: 0.8em; 
    color: black; 
    float: left; 
    } 

    #photograph { 
    float: right; 
    } 

をしかし、それはまだそれらを整列しませんウィンドウのサイズを変更します。

See this fiddle

#photograph { 
    float: right; 
    width: 267px; 

} 
#intro {  
    width: calc(100% - 267px); 
    font-size: 0.8em; 
    color: black; 
    float: left; 
} 

Answer 2

あなたが探して、このようなTIのものです???

#intro { 
 
    font-size: 0.8em; 
 
    color: black; 
 
    
 
    } 
 

 
    #photograph { 
 
    
 
    } 
 
    .test{ 
 
     display:flex; 
 
     justify-content:space-between; 
 
     background-color:pink; 
 
     align-items: center; 
 
    }

<div class="test"> 
 
<p id="intro">blah blah blah lots of text.</p> 
 
<img src="macro.jpg" height="476" id="photograph" width="267" /> 
 
</div>