Блог

Главная - Вопросы по программированию - Текст, перекрывающий столбец на 100% с разрешением около 700 пикселей

Текст, перекрывающий столбец на 100% с разрешением около 700 пикселей

#html #css

#HTML #css

Вопрос:

Если бы это работало нормально, но потом оно недавно сломалось. При 1500px система столбцов превращается в один столбец шириной 100%, но по какой-то причине текст исчезает с экрана со скоростью около 700 пикселей, и я не понимаю, почему. Текст внизу работает нормально, и панель навигации тоже работает нормально, но по какой-то причине текст прерывается.

URL: liammacalister.com

 <!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="utf-8"/>    
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <link rel="stylesheet" href="homeStyle.css">

    <title>Liam Macalister - Home</title>
    
</head>
    <div class="header">
        <h1>Liam Macalister - Portfolio</h1>
    </div>

    <ul class="topnav">
        <li><a href="#header">Home</a></li>
        <li><a href="#aboutContent">About Me</a></li>
        <li><a href="#unityContent">Unity</a></li>
        <li><a href="#unrealContent">Unreal</a></li>
        <li><a href="#cvContent">CV</a></li>
        <li><a href="#footer">Contact</a></li>
    </ul>

    <div class="row">
        <div class="column">
            <h2>Left Text</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit. 
                Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada. 
                Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada 
                fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna. 
                Nullam molestie nulla lorem, quis congue leo egestas sit amet.
                Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu, 
                quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui. 
                Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh. 
                Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus, 
                sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
                Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet. 
                Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit. 
                Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend. 
                Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus. 
                Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue, 
                a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque. 
                Vivamus in dolor libero.
                Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo. 
                Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
                Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at. 
                Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc. 
                Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet, 
                pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non. 
                Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis, 
                vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut. 
                In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus. 
                Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget, 
                placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
            </p>
        </div>
        <div class="column">
            <img class="imgMe" src="Me.jpg" alt="Me">               
        </div>
        <div class="column">
            <h2>Right Text</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit. 
                Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada. 
                Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada 
                fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna. 
                Nullam molestie nulla lorem, quis congue leo egestas sit amet.
                Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu, 
                quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui. 
                Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh. 
                Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus, 
                sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
                Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet. 
                Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit. 
                Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend. 
                Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus. 
                Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue, 
                a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque. 
                Vivamus in dolor libero.
                Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo. 
                Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
                Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at. 
                Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc. 
                Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet, 
                pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non. 
                Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis, 
                vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut. 
                In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus. 
                Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget, 
                placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
            </p>
        </div>
    </div>  

    <div id ="aboutContent" class="aboutContent">
        <h2> Second Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit. 
            Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada. 
            Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada 
            fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna. 
            Nullam molestie nulla lorem, quis congue leo egestas sit amet.
            Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu, 
            quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui. 
            Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh. 
            Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus, 
            sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
            Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet. 
            Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit. 
            Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend. 
            Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus. 
            Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue, 
            a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque. 
            Vivamus in dolor libero.
            Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo. 
            Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
            Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at. 
            Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc. 
            Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet, 
            pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non. 
            Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis, 
            vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut. 
            In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus. 
            Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget, 
            placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.</p>
    </div>
    <div id ="unityContent" class="unity">
        
    </div>
    <div id ="unrealContent" class="unreal">
    </div>

    <div id ="cvContent" class="cv">
    </div>

    <div id="footer" class="footer">
        <h2>Contact</h2>
    </div>
</body>
</html>

CSS:

 * {
  box-sizing: border-box;
}

@font-face{
  font-family: PermanentMarker;
  src:URL('PermanentMarker.ttf') format('truetype');
}

html {
  scroll-behavior: smooth;
}

body{
  margin: 0;
}

.header {
  font-family: PermanentMarker;
  font-size: 28px;
  padding: 20px;
  text-align: center;
}

h2 {
  font-family: PermanentMarker;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover {background-color: #111;}

ul.topnav li.right {float: right;}

.column {
  float: left;
  width: 33.33%;
  padding: 15px;
  /*font-size: 18px;*/
}

p{
  font-family: Arial, Helvetica, sans-serif;
}
.row {
  content:"";
  display: table;
  clear: both;
}

.imgMe{
  padding-top: 30px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.aboutContent{
  padding: 15px;
}

.footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
}

@media screen and (max-width: 2000px){
  .column{
    width: 50%;
  }
}

@media screen and (max-width: 1500px){
  .column{
    width: 100%;
  }
}

@media screen and (max-width: 600px){
  ul.topnav li.right, 
  ul.topnav li {float: none;
  }
  .column{
    width: 100%;
  }
}

Любой совет?

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

1. Ленивое решение: почему бы вам не использовать те же классы для левого и правого текста, что и для второго класса? В противном случае, в чем разница, которую вы хотите получить между левым / правым и вторым?

Ответ №1:

Вместо использования чисел с плавающей запятой и display: table я бы использовал flex . 2 примера, как предполагалось, результат неясен.

HTML: (2 строки по 2 столбца со 2-м столбцом строки вправо)

 <div class="container">
    <div class="row">
      <div class="col">
        <p>Text LEFT</p>
      </div>
      <div class="col">
        <img src="liamphoto.jpg" alt="">
      </div>
    </div>
    <div class="row-reverse">
      <div class="col">
        <p>Text RIGHT</p>
      </div>
    </div>
  </div>

CSS:

 .container {
  padding: 0 15px;
  margin: 0 auto;
  max-width: 1400;
}
.row {
  display: flex;
  height: 100%;
}
.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.col {
  height: 100%;
  width: 50%;
  border: solid green;
}
img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 600px) {
  .row {
    display: block;
  }
  .col {
    width: 100%;
  }
}

HTML: (1 строка из 3 столбцов одинаковой ширины)

 <div class="container">
      <div class="row">
        <div class="col">
          <p>Text LEFT</p>
        </div>
        <div class="col">
          <img src="Me.jpg" alt="">
        </div>
        <div class="col">
          <p>Text RIGHT</p>
        </div>
      </div>
    </div>

CSS:
добавить сверху

 * {
  margin: 0;
  padding: 0;
}

изменить:

 .col {
  height: 100%;
  width: 33%;
}

Адаптируйте .col ширину и медиа-запросы к вашим потребностям.

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

1. Это мне не помогает, поскольку из-за этого столбцы делятся на 2 столбца и один ниже. Я попытался изменить ширину на 33,33% и удалить отступы и поля, но он по-прежнему не возвращается к системе из 3 столбцов.

2. Я изменил строку на display: block; которая теперь работает правильно, но изображение на display: block; не работает

3. Заданная проблема касалась переполнения текста. Если ответ не помогает, постарайтесь более четко определить, как должна выглядеть предполагаемая структура.

Метки: ,