Question

我有一个图像和一个段落。我想'css'图像在左边，而段落在右边。并且段落的第一行必须显示图像的中心。其他行必须缩进，与第一行相同。

CSS能做到吗？我希望你能教会我实现这一目标的方法。

先谢谢你！

HTML ：

 <div class="parent">
  <img src="http://jsfiddle.net/img/logo.png">
  <div class="child">
 The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. 
  </div>
</div>

CSS ：

img { 
   display: inline;
}
.child {
  display: inline;
}

这是我的jsfiddle：https://jsfiddle.net/qn4bh8ht/

根本不工作。：（

Answer 1

试试这些：JsFidle。

我对display: table班级使用.parent，然后table-cell班级的vertical-align: top使用.child。

.parent {
  display: table;
}
.parent > * {
  display: table-cell;
}
.child {
  vertical-align: top;
}

Answer 2

在para的开头设置span并设置width:45%

HTML

<div class="parent">
  <img src="http://jsfiddle.net/img/logo.png">
  <div class="child"><span class="first-line">&nbsp;</span>
 <span> The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. </span>
  </div>
</div>

CSS

.first-line:{
  display:inline-block;
  width:45%;
}

Answer 3

你可以使用填充来做到这一点，也可以用标签img不是类，在css文件中删除“。”在img之前。

img { 
   float:left;
}
.child {
  padding-left: 50px;
padding-top: 8px;
}

 <div class="parent">
  <img src="http://jsfiddle.net/img/logo.png">
  <div class="child">
 The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. 
  </div>
</div>

如何将段落中心的第一行与图像对齐。而其他行和第一行是相同的缩进？

3 个答案: