Question

我有以下内容： http://prntscr.com/ebu70b
我试图让文本环绕地球，所以它在每行上大约20px，如下所示：
http://prntscr.com/ebu9ef

<div class="section">
                <img src="images/globe.png" class="leftimage">
                <div class="smtitle righttext">Title</div>
                <p class="righttext">
                        <!--This is just lorem ipsum no need to scroll-->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis tincidunt leo. Maecenas malesuada tincidunt arcu, vel tristique quam tincidunt sit amet. Ut nisl risus, fermentum at metus a, sodales porta dolor. Curabitur posuere ligula a lacus iaculis, vel lacinia metus porttitor. Nunc iaculis, ipsum quis tristique semper, tortor tellus lobortis dui, id hendrerit nisi enim sit amet libero. Morbi vehicula porta lectus a varius. Pellentesque vestibulum fermentum turpis et ullamcorper. Curabitur venenatis lacus nec bibendum malesuada. Phasellus mollis in turpis vel tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget luctus nisi. Nulla odio quam, hendrerit vitae cursus vitae, gravida at sapien. Aenean ullamcorper elit ligula, id molestie metus bibendum non.
                </p>
</div>

这是css：

.section{
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
    margin-bottom:30px;
}
.righttext{
    padding:0 15px;
    float:right;
    text-align:left;
    width:70%;
}
.rightimage{
    float:right;
    width:30%;
}
.leftimage{
    float:left;
    width:30%;
}
.lefttext{
    padding:0 15px;
    float:left;
    text-align:right;
    width:70%;
}

我不知道如何做到这一点，我意识到我最需要一个圆形图像，如果需要我会照顾它

Answer 1

致 Dudley Storey

的信用

你需要shape-outside：circle（）;

参考：https://developer.mozilla.org/en/docs/Web/CSS/shape-outside

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#circle-shape-example { 
  font-family: Open Sans, sans-serif; 
  margin: 2rem; 
}
#circle-shape-example p { 
  line-height: 1.8; 
}
#circle-shape-example .curve { 
  width: 33%; height: auto;
  min-width: 150px;
  float: left;
  margin-right:2rem; 
  border-radius: 50%;
  -webkit-shape-outside:circle();
  shape-outside:circle();
}

＆＃13;

<div id="circle-shape-example">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/kiwifruit-on-a-plate.jpg" alt="A photograph of sliced kiwifruit on a while plate" class="curve">
  
  <h1>KiwiFruit</h1>
  <p>This is kiwifruit: originally called “yang tao”, “melonette” or Chinese gooseberry. Cultivated in its fuzzy variety from Chinese imports, the fruit proved popular with American military servicemen stationed in New Zealand during World War II, with commercial export to the United States starting after the end of the war. In California, the fruit was rebranded as “kiwifruit” due to its resemblance to New Zealand’s national bird. However, it is not a “kiwi”, which is also the demonym for native New Zealanders. Saying “I’m going to eat a kiwi” implies that you are either a cannibal or planning to dine on an endangered flightless bird.
</div>

＆＃13;

在html和css中围绕图像环绕文本

1 个答案: