与img内联的段落

时间:2016-04-02 15:12:06

标签: html css alignment inline

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

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

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

2 个答案:

答案 0 :(得分:0)

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

See this fiddle

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

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

答案 1 :(得分:0)

是这样的,你在寻找???

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

  #photograph {
   
    }
    .test{
      display:flex;
      justify-content:space-between;
      background-color:pink;
      align-items: center;
    }
&#13;
<div class="test">
<p id="intro">blah blah blah lots of text.</p>
<img src="macro.jpg" height="476" id="photograph" width="267" />
</div>
&#13;
&#13;
&#13;