Блог

Главная - Вопросы по программированию - две вертикальные линии на изображении, разделяющие 3 абзаца

две вертикальные линии на изображении, разделяющие 3 абзаца

html #css

#HTML #css

Вопрос:

Это то, чего я пытаюсь достичь

Вертикальная линия на изображении, разделяющая 3 абзаца Существует учебное пособие о том, как сделать вертикальную линию, но нет о том, как это сделать на изображении (изображение — это фон внутри тела в теге div с class=»container»).

То, что я пробовал, это

         /* Container holding the image and the text */
    .container {
        position: relative;
        text-align: center;
        
      }
      
      /* Top left text */
      .top-left {
        color: black;
        position: absolute;
        top: 8px;
        left: 16px;
      }
      
      /* Top right text */
      .top-right {
        color: black;
        position: absolute;
        top: 8px;
        right: 16px;
      }
      
      
      /* Centered text */
      .top-centered {
        color: black;
        position: absolute;
        top: 1.5%;
        left: 50%;
        transform: translate(-50%, -50%);
      } 
    
      .centered {
        color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      } 
    
      .vl {
        color: black;
        position: absolute;
        top: 50%;
        left: 50%;
      } 
     <section>
    <div class="container">
        <img id="building-img" src="architecture-building-town-city1.jpg" alt="A tall Building">
        <div class="bottom-left">Bottom Left</div>
        <div class="top-left"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br> 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Id diam vel quam elementum pulvinar. 
         tincidunt vitae semper quis. </p></div> 
        <div class="v1"></div>
        <div class="top-right">Top Right</div>
        <div class="top-centered">Centered</div>
        <div class="centered">centered</div>
      </div> 
</section>

но он даже не отображает вертикальную линию.

Комментарии:

1. Абсолютное позиционирование — очень плохой метод размещения веб-страниц. Он чрезвычайно негибкий, и есть гораздо лучшие и более отзывчивые варианты. Проверьте LearnLayout.com

2. Также изображение не является background-image , это реальное изображение.

3. итак, @Paulie_D я изменил его на фоновое изображение, используя css. Как насчет вертикальных линий? должен ли я использовать тот же метод, что и выше, используя <div class=»v1″></div>, а затем применить к нему css?

4. @AtiqShaikh вы можете использовать border-right

5. Если ваше изображение имеет значение, оно должно остаться в коде . Для вашего макета есть несколько вариантов, которые предлагает css, здесь можно использовать flex и column CSS . Столбец CSS может отображать линейку, которую вы можете оформить как границу. вот пример, чтобы показать вам подход с изображением в HTML, сгибом для первой строки и столбцом для столбцов и линейки: jsfiddle.net/ohcaz51d

Ответ №1:

Здесь я создал раздел с помощью справочной сетки и использовал сам элемент div в качестве раздела. Фоновое изображение может быть размещено в зависимости от ваших потребностей. В следующем случае я использовал его целиком, если хотите, вы можете сделать это под контейнером и т. Д.

 *{
padding : 0px;
margin: 0px;
}
body{
 width:100%;
 height:100%;
  background: no-repeat url("https://images.pexels.com/photos/1662159/pexels-photo-1662159.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500") ;
  background-size: cover;
}

.container{
   height:100px;
   width:95%;
   display:grid;
   grid-template-columns: 1fr 3px 1fr 3px 1fr;
   justify-content:center;
   align-items:center;
   margin:30px auto;
}

.container>div{
  text-align:center;
}
.border{
  height:70%;
  background-color:black;
  border-radius:2px;
} 
 <body>
  <div class="container">
    <div>Crispiest <br>crust</div>
    <div class="border"></div>
    <div>Certified<br> Safe</div>
    <div class="border"></div>
    <div>Extreme <br>Durability</div>
  </div>
</body>

Метки: ,