与 img 内联的段落答案

【问题标题】：Paragraph inline with img与 img 内联的段落
【发布时间】：2016-04-02 23:58:07
【问题描述】：

我在将段落与内联图像对齐时遇到问题。

<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;
    }

但它仍然没有对齐它们......请帮助

【问题讨论】：

标签： html css alignment inline

【解决方案1】：

您可以这样做以在调整窗口大小时使其流畅。

See this fiddle

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

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

【讨论】：

【解决方案2】：

你在找这样的东西吗？？？

#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>

【讨论】：