Блог

Главная - Вопросы по программированию - Html Css Удаляет расстояние между изображениями и p

Html Css Удаляет расстояние между изображениями и p

#html #css

#HTML #css

Вопрос:

Мне интересно, как в этом случае удалить расстояние между изображениями и p. Картинка, которая показывает, о чем я говорю:

чего я хочу

Код выглядит следующим образом:

 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;
    } 
  <div id="wrapper">
      <div id="content">
        <br><br>
    
        <div class="box">
          <span class="tooltiptext">Tooltip text</span>
          <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.
            <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>
    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.
        </div>
    
        <br><br><br>
        Programming is my hobby and <b>I love it</b>! :)
        <br><br>
      </div>
    </div>

Если вам нужно посмотреть в codepen, просто загляните сюда. Я не знаю, что еще мне нужно добавить. Я написал все, что вам нужно.

Если вы добавите ценный ответ для меня, я отмечу его как лучший!

Ответ №1:

Дайте абзацам слева a class="left-aligned" , а абзацам справа a 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>