Question

我为图片添加了边框以替换丢失的文件。在＆＃34;日托＆＃34;下，通告<img>（.curve）不允许文字环绕它。据我所知，我在CSS中有正确的代码。有什么问题？

＆＃13;

@charset "UTF-8";

/* CSS Document */

.banner img {
  width: 100%;
  height: 300px;
  border-style: solid;
}

.badge img {
  float: left;
  width: 250px;
  border-style: solid;
  height: 150px;
}

.mission {
  padding-top: 25px;
}

body {
  margin: 0;
}

.wrapper {
  margin: auto;
  width: 1000px;
}

nav {
  background-color: #537B80;
  color: white;
  text-align: center;
}

nav a {
  padding: 15px 40px 15px 40px;
  display: inline-block;
}

img {
  display: block;
  margin: auto;
}

header p {
  width: 55%;
  float: left;
  margin: 30px 30px 0 75px;
  text-align: center;
  font-size: 20px;
}

.daycare {
  clear: both;
}

.daycare h1 {
  float: right;
  color: #537B80;
}

.daycare hr {
  float: left;
  border-width: 4px;
  border-style: solid;
  color: #dde678;
  width: 83%;
  margin-top: 36px;
}

.curve {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle();
  border-radius: 50%;
  margin: 15px 0 0 0;
  border-style: solid;
}

.daycare p {
  text-align: left;
  margin: 10px 0 0 7px;
  width: 65%;
  float: left;
}

＆＃13;

<div class="wrapper">

  <header>
    <div class="banner"><img src="img/Banner.png"></div>

    <nav>
      <a>Day Care</a><a>Grooming</a><a>Spa</a><a>Self Wash</a>
    </nav>

    <div class="mission">
      <p>Every dog is unique - especially your dog! Visit Lucky's today for open play dog daycare, overnight boarding or spa services and experience personalized care and exceptional customer service. Our convenient live webcams offer a peek into your dog's
        day and peace of mind that they're having the time of their life with their canine friends and our well-trained, loving staff.</p>
      <div class="badge"> <img src="img/Badge.png"></div>
    </div>

    <div class="daycare">
      <hr>
      <h1>Day Care</h1>
      <img src="img/daycare.png" alt="daycare" class="curve">
      <p>7am: Happy dogs begin to arrive for a full day of play and fun</p>
      <p>7-12pm: Open play time: romping, sniffing and lounging</p>
      <p>12-2pm: A well-deserved nap</p>
      <p>2-7pm: Back out for more play before being picked up by Mom or Dad</p>
      <p>Dogs left home alone during the day may experience separation anxiety or display undesirable behavioral issues such as chewing and excessive barking. These can occur when a dog lacks sufficient exercise and socialization. Dog daycare is your answer!
        Drop your dog off at Luckys and they'll spend the day socializing with other dogs, interacting with our well-trained staff and burning off energy. At the end of the day, you'll pick-up a happy and delightfully tired pup. Some dogs visit every
        day, others just a couple of times a month. Every dog is unique and we're happy to discuss the best play schedule to suit your dog's needs, as well as your busy schedule, budget and life-style.</p>
    </div>

  </header>

</div>

＆＃13;

View on CodePen

Answer 1

从段落中删除浮动。

.curve {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle();
  border-radius: 50%;
  margin: 15px;
  border-style: solid;
}

.daycare p {
  text-align: left;
  margin: 10px 0 0 7px;
}

<div class="daycare">
  <img src="http://www.placebacon.net/300/300" alt="daycare" class="curve">
  <p>7am: Happy dogs begin to arrive for a full day of play and fun</p>
  <p>7-12pm: Open play time: romping, sniffing and lounging</p>
  <p>12-2pm: A well-deserved nap</p>
  <p>2-7pm: Back out for more play before being picked up by Mom or Dad</p>
  <p>Dogs left home alone during the day may experience separation anxiety or display undesirable behavioral issues such as chewing and excessive barking. These can occur when a dog lacks sufficient exercise and socialization. Dog daycare is your answer!
    Drop your dog off at Luckys and they'll spend the day socializing with other dogs, interacting with our well-trained staff and burning off energy. At the end of the day, you'll pick-up a happy and delightfully tired pup. Some dogs visit every day,
    others just a couple of times a month. Every dog is unique and we're happy to discuss the best play schedule to suit your dog's needs, as well as your busy schedule, budget and life-style.</p>
</div>

Answer 2

好的，所以我觉得有点愚蠢，但我意识到我偶然在日托部分之后有了/ header标签，这应该在导航后结束。当我把它移回来时它解决了这个问题。因此标题或某些内容的CSS规则会干扰它。感谢大家的帮助

Answer 3

我认为图片必须与您想要环绕它的内容内联，而不是在它自己的块中。将图像放在段落中似乎对我有用。

无法获取文字以包裹圆形图像

3 个答案: