文字不环绕图像

时间:2018-09-14 15:53:14

标签: css hugo

我使用的是Hugo主题,并且在CSS中,无法找到一个属性,该属性不允许我在图像周围包裹文本。

当我将CSS精简到我想要的样子时:

http://jsfiddle.net/d7cLxbs0/10/

有效。

我需要另一双眼睛,因为我看不到我所不知道的东西。

编辑。

我提供了一个有关CSS的演示。

http://jsfiddle.net/obpjh4em/9/

cd R:\PRODUCTION\92 
ren *. *.ddd

2 个答案:

答案 0 :(得分:1)

该演示中的问题是bodyflex。从代码中删除以下行:

display: -webkit-box;
display: -ms-flexbox;
display: flex;

问题解决了。

http://jsfiddle.net/obpjh4em/12/

答案 1 :(得分:0)

你去了

body {
  padding: 2em;
  background: white;
}

.left {
  margin-bottom: 1em;
  line-height: 1.8;
  letter-spacing: 2px;
  opacity: 0.8;
  /* z-index: 1; */
}

.right {
  max-width: 50%;
  /* margin-right: 50px; */
  /* max-height: 100%; */
  margin: 2rem auto;
  margin-bottom:420px;
  float: right;
  /* opacity: 1; */
  /* position: absolute; */
  display: inline-block; 
}
.wrap{
  margin-bottom: 1em;
  line-height: 1.8;
  letter-spacing: 2px;
  opacity: 0.8;
  /* z-index: 1; */
}
<img class="right" alt="Sample Photo" src="http://placehold.it/200x200/" />

<div class="left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur aliquam convallis. Pellentesque id vestibulum nibh.
  Nulla eu neque lobortis, luctus sapien sed, ultrices justo.
  <br> Aenean at erat at felis.
  <br>
  <br>
  <div class='wrap'>
    Nullam ultricies egestas imperdiet. Nullam nec pharetra ante. Morbi mi neque, commodo vel sodales a, facilisis et tortor.
    Aenean fringilla lorem a quam ullamcorper rutrum. Maecenas eu porta ante, ac tincidunt lectus. Etiam vel hendrerit ipsum,
    ut posuere metus. Quisque id scelerisque odio, nec egestas nunc. Donec enim purus, lacinia nec faucibus at, congue pretium
    erat. Suspendisse ac mollis dolor. Curabitur tempor semper nunc, vel semper orci aliquet sed. Cras nec dui sodales, faucibus
    justo vel, molestie purus...
  </div>
</div>