Question

我有一张图片，想把我的文字放在右边。我有下面的代码，为什么它没有工作？我的小提琴： http://jsfiddle.net/a2kjtuet/2/#&togetherjs=zvUcL6sQOE

.posText { 
 position: absolute; 
 top: 200px; 
 left: 0; 
 width: 100%; 
 }

  <img src="http://www.placecage.com/100/100"/>

  <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>    
  <p>Vestibulum vehicula odio quis ante pellentesque pharetra. Duis congue nibh in nisl iaculis iaculis. Nunc cursus est ut leo sollicitudin euismod.<br>

  Maecenas commodo dui sed interdum placerat. Duis nec semper nunc. Fusce at  volutpat eros.Etiam tincidunt nulla ut mauris pellentesque, nec ullamcorper  dolor scelerisque. Praesent semper pharetra viverra. <br>

  <b>Ut fermentum sodales felis quis rutrum.</b>
  </p>

  </div>

Answer 1

使用浮动样式设置图像

  <img style="float:left;"  src="http://www.placecage.com/100/100"/>

Answer 2

使用 CSS Flexbox 。请看下面的代码段：

＆＃13;

.posText {
  display: flex;
}

img {
  flex-basis: 100px;
  align-self: flex-start;
}

.text-container {
  margin-left: 10px;
} 

h4 {
  margin-top: 0;
}

＆＃13;

<div class="posText">
  
      <img src="http://www.placecage.com/100/100"/>    
  <div class="text-container">
      <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>

<p>Vestibulum vehicula odio quis ante pellentesque pharetra. Duis congue nibh in nisl iaculis iaculis. Nunc cursus est ut leo sollicitudin euismod.<br>

Maecenas commodo dui sed interdum placerat. Duis nec semper nunc. Fusce at volutpat eros.Etiam tincidunt nulla ut mauris pellentesque, nec ullamcorper dolor scelerisque. Praesent semper pharetra viverra. <br>
 
<b>Ut fermentum sodales felis quis rutrum.</b>
</p>

</div>
  </div>

＆＃13;

希望这有帮助！

css无法将图像放在文本的右侧

2 个答案: