段落內嵌img

Question

我有一個問題對齊段落與圖像內聯。

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

我試着在CSS這樣的：

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

    #photograph { 
    float: right; 
    } 

但它仍然沒有對齊它們...請幫助

Answer 1

你可以這樣做，使之液，當你調整窗口大小。

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>