Question

我想知道在这种情况下如何消除图像和 p 之间的距离。图片显示了我在说什么：

what I want

代码如下：

line = # ...
prefix = # ... either "hgt" or "pid" or other

def check_hgt(line):
    pass
def check_pid(line):
    pass
# ... other checker functions

checker_functions_pool = {"hgt": check_hgt, "pid": check_pid}

checker_function = checker_functions_pool[prefix]
checker_function(line)

html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    
    header { position: relative;  z-index: 1;}
    
    /*#images-fs {*/
    /*  z-index: -10;*/
    /*}*/
    
    #wrapper {
      height: 100%;
      width: 100%;
      top: 0; left: 0;
      position: absolute;
      z-index: -1;
      background: forestgreen;
    }
    
    #content {
      box-sizing: border-box;
      position: absolute;
      padding: 0;
      margin-left: 0;
      margin-right: 0;
      text-align:center;
      overflow: auto;
      left: 0;
      right: 0;
      top: 70px;
      width: 100%;
      font-size: 25px;
    }
    
    p {
      font-size: 20px;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    body {
      text-align: center;
    }
    
    div.box {
    
      margin: 0 auto;
      font-size: 0;
      width: 875px;
      --R:175px; /* radius */
      --m:5px;   /* margin */
      --t:50px;  /* distance from top */
    }
    
    p {
      font-size: 20px;
    }
    
    div.box p {
      width: 50%;
      margin:0;
      padding:0 var(--m);
      display: inline-block;
      vertical-align:top;
      text-align: justify;
    }
    
    div.box p:before {
      content: "";
      width: var(--R);
      height: calc(2*var(--R));
      margin-top:var(--t);
      shape-outside: circle(var(--R) at var(--d,right) calc(-1*var(--m)) top calc(50% + var(--t)/2));
      float: right;
      margin-right:calc(-1*var(--m));
    }
    
    div.box p:last-child:before {
      float: left;
      padding:0 0;
      --d:left;
      background-position:right;
      margin-left:calc(-1*var(--m));
      margin-right:0;
    }
    
    *,*::before,*::after {
      box-sizing:border-box;
    }
    
    
    
    
    
    
    
    .tooltip {
      position: relative;
      display: inline-block;
      margin-top:50px;
      text-align: center;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      z-index: 1;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      font-size:20px;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

如果您需要在 codepen 上查看，请查看 here。我不知道我还需要补充什么。我写了你需要的一切。

如果您为我添加有价值的答案，我将标记为最佳！

Answer 1

给左边的段落一个class="left-aligned"，给右边的段落一个class="right-aligned"。

将以下规则添加到您的 CSS：

p {
  position: relative;
}

.left-aligned {
  right: -150px;
}

.right-aligned {
  left: -150px;
}

您可以将值 150px 更改为您喜欢的任何值（只要它是负数）。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  text-align: center;
}

header {
  position: relative;
  z-index: 1;
}

#wrapper {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  background: forestgreen;
}

#content {
  box-sizing: border-box;
  position: absolute;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  overflow: auto;
  left: 0;
  right: 0;
  top: 70px;
  width: 100%;
  font-size: 25px;
}

p {
  font-size: 20px;
  position: relative;
}

.left-aligned {
  right: -150px;
}

.right-aligned {
  left: -150px;
}

div.box {
  margin: 0 auto;
  font-size: 0;
  width: 875px;
  --R: 175px;
  /* radius */
  --m: 5px;
  /* margin */
  --t: 50px;
  /* distance from top */
}

div.box p {
  width: 50%;
  margin: 0;
  padding: 0 var(--m);
  display: inline-block;
  vertical-align: top;
  text-align: justify;
}

div.box p:before {
  content: "";
  width: var(--R);
  height: calc(2 * var(--R));
  margin-top: var(--t);
  shape-outside: circle( var(--R) at var(--d, right) calc(-1 * var(--m)) top calc(50% + var(--t) / 2));
  float: right;
  margin-right: calc(-1 * var(--m));
}

div.box p:last-child:before {
  float: left;
  padding: 0 0;
  --d: left;
  background-position: right;
  margin-left: calc(-1 * var(--m));
  margin-right: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.tooltip {
  position: relative;
  display: inline-block;
  margin-top: 50px;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div id="wrapper">
  <div id="content" [ngStyle]="{'bottom': footerHeight + 10 + 'px'}">
    <app-text-effect [input]="'About'"></app-text-effect>
    <br><br>

    <div class="box">
      <span class="tooltiptext">Tooltip text</span>
      <p class="left-aligned">
        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.
        <br><br>
      </p>

      <div class="tooltip">
        <img src="https://jakuwegiel.web.app/assets/images/DSC_0925a-1.png" width="350px" height="350px">
        <span class="tooltiptext">My beautiful face</span>
      </div>

      <div class="tooltip">
        <img src="https://jakuwegiel.web.app/assets/images/cards.png" width="350px" height="350px">
      </div>
      <p class="right-aligned">
        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>

    <br><br><br> Programming is my hobby and <b>I love it</b>! :)
    <br><br>
  </div>
</div>

Html Css 删除图像和 p 之间的距离

1 个答案: