Question

我有一个文本和图像，我想应用“文本换行”。在我的情况下，文本只包装在图像下方，但我试图达到完全相反的目的。一个小提琴说超过千言万语......

HTML

  <p>
    <span class="myimage">Image</span>
    Lorem Ipusm sum dolor set Lorem Ipusm sum dolor set Lorem Ipusm sum dolor setLorem Ipusm sum dolor set Lorem Ipusm sum
    dolor setLorem Ipusm sum dolor setLorem Ipusm sum dolor setLorem Ipusm sum dolor set    etLorem Ipusm sum dolor setLorem Ipusm sum dolor setLorem Ipusm sum dolor set  etLorem Ipusm sum dolor setLorem Ipusm s
    um dolor setLorem Ipusm sum dolor set
</p>

CSS

   .myimage {
   width: 140px;
    height: 120px;
    position: relative;
    float: right;
    top: 15px;
    margin: 11px;
    border: 1px solid red;
}

*我希望文字仅包装在图片上方，而不是在*

下面

感谢

Answer 1

height: calc(100% - 120px);会帮助你：）

＆＃13;

body {
  font-family: sans-serif;
  font-size: 13px;
}
.container {
  max-width: 400px;
  height: 200px;
}
img {
  height: 100px;
  width: 150px;
  background-color: white;
  border: 5px solid red;
  box-sizing: border-box;
  float: right;
  clear: right;
}
.spacer {
  height: calc(100% - 120px);
  width: 0px;
  float: right;
}

＆＃13;

<div class="container">
<div class="spacer"></div>
<img/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

＆＃13;

Answer 2

一个简单的答案。

.myimage {
    float: right;
    clear: right;
    
    /* Visual settings */
    width: 140px;
    height: 130px;
    margin: 20px;
    border: 2px solid red;
}

.container::before {
    content: "";
    height: 5em;
    width: 0px;
    float: right;
}

/* Visual settings */
p {
    text-align: justify; 
}

<p class="container">
<span class="myimage">Image</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ullamcorper urna. Maecenas et libero sed libero consequat varius vitae nec erat. Sed volutpat venenatis lacus non commodo. Sed rutrum libero eu malesuada ultricies. Donec feugiat tincidunt turpis vel hendrerit. Curabitur id nisi ex. Nullam nec justo in velit lobortis commodo id non odio. Morbi augue lacus, semper ac ornare id, placerat eu ante. Etiam euismod nisl et turpis auctor, a ornare justo ultricies. Nulla eget ultricies magna, eu maximus augue. Suspendisse sed ligula sit amet mi feugiat iaculis. Fusce sagittis libero id feugiat consectetur. Pellentesque egestas ultrices scelerisque. Donec commodo quam purus, a hendrerit diam feugiat at. Pellentesque a justo a tellus vehicula convallis id sed magna. Vivamus id vestibulum nisl.

Fusce pulvinar libero non sapien placerat, eu ullamcorper turpis lobortis. Nam augue nibh, volutpat at augue eget, scelerisque congue odio. Suspendisse feugiat sollicitudin cursus. Mauris quis risus egestas, tincidunt sapien hendrerit, semper justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc scelerisque libero nec turpis dapibus, ac viverra turpis elementum. Nullam et ultricies urna. Maecenas augue purus, porta sed felis eget, pretium pretium lectus. Etiam a bibendum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sed risus accumsan, porttitor orci et, consequat felis. Nam non bibendum libero. Maecenas pellentesque consectetur libero a congue. Vestibulum ultricies magna eget nisi mattis aliquam.    
</p>

css包装上面的文字 - 不在图像下面

2 个答案:

一个简单的答案。