HTML / CSS: как сделать так, чтобы текст вокруг изображения соответствовал размеру окна?

Когда моя веб-страница отображается на рабочем столе, текст рядом с ней отображается нормально, однако в тот момент, когда я изменяю его размер до гораздо меньшего размера, текст выглядит загроможденным и появляется под изображениями или за нижним колонтитулом. Можно ли сделать так, чтобы текст вокруг изображения отображался комфортно, возможно, располагая его над изображением или около того?

HTML / CSS: https://jsfiddle.net/jof0hzhc/15/

html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}

 
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: black;
}

li>a{display:;}
li>a:hover,	/*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
 
header {
      width: 98%;
      height: 13vh;
     
}

.welcome {
	font-family: courier;
	padding: 30px;
	font-size: 60px;
	color: white;
}

.intro {
	color: white;
	
}

.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
}

.content h1 {
  margin-top: 0;
}


.apphead {
	color: white;
	font-size: 100px;
	font-family: courier;
}

.apptext {
	color:white;
	font-size: 45px;
	font-weight: bold;
	font-family: courier;
	
}

.games {
	margin:0;
	position:relative;
	border:solid white;	
}

.games img {
	position:relative;
	max-width:100%;
	padding: 5px;
	transition: 1s;
	
}
	
.games img:hover {
	transform: scale(1.1);
}

.item img{
	display:block;
}

.box {
	position: absolute;
	color: white;
	display: inline;
	font-size: 17px;

}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: darkgrey;
  text-align: center;
  
}

.logo {
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
}

nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
	  z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
 
nav ul {
      line-height: 60px;
      list-style: none;
      background: black;
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
}
 
nav.black ul {
      background: orange;
	  opacity: 10;
}
 
nav ul li {
      display: inline-block;
      padding: 16px 40px;;
}
 
nav ul li a {
      text-decoration: none;
      color: white;
      font-size: 16px;
}
 
.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: orange;
      display: none;
}

.activepage { 
	font-size: 25px;
	color: red;
	text-decoration: underline;
}

 
@media(max-width: 786px) {
 
      .logo {
            position: fixed;
            top: 0;
            margin-top: 16px;
      }
 
      nav ul {
            max-height: 0px;
            background: #000;
      }
 
      nav.black ul {
            background: #000;
      }
 
      .showing {
            max-height: 34em;
      }
 
      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 24px;
            text-align: center;
      }
 
      .menu-icon {
            display: block;
      }
 
}

<!DOCTYPE html>
<html lang = "en">
<head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
      <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
      <title>Responsive Sticky Navbar</title>
      <link rel = "stylesheet" href = "css/style.css">
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	  <script type = "text/javascript" src = "js/script.js"> </script>

</head>
<body>
      <div class = "wrapper">
            <header>

                  <nav>

                        <div class = "menu-icon">
                              <i class = "fa fa-bars fa-2x"></i>
                        </div>

                        <div class = "logo">
                              LOGO
                        </div>

                        <div class = "menu">
                              <ul>
                                    <li><a href = "#">Home</a></li>
                                    <li><a href = "#">About</a></li>
                                    <li><a href = "#">Blog</a></li>
                                    <li><a href = "#">Contact</a></li>
                              </ul>
                        </div>
                  </nav>

            </header>
			<div class = "slideshow">
				<h2 class = "welcome">Heading</h2>
				<div class = "blueberry"> <!----Image slider with 4 images---->
					<ul class = "slides">
						<li><img src = "images/spiderman.jpg" height = "600px" /></li> </a>
						<li><img src = "images/kh3.jpg" /></li> </a>
						<li><img src = "images/galaxy.jpg" /></li> </a>
						<li><img src = "images/blue.jpg" /></li> </a>
					</ul>
				</div>

            <div class = "content">
                  <p class = "intro">
                        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>
				  <p class = "intro">
                        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>
				  <p class = "intro">
                        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>
				  <p class = "intro">
                        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>
				  <p class = "intro">
                        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>
				  <p class = "intro">
                        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>
				  <p class = "intro">
                        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>
                  
				  <p class = "apptext">Games
					<div class = "games">
						<img src = "images/1.png" width = "640px" height = "250px">
						<p class = "box">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. 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.</p>
						
					</div>
					<div class = "games">
						<img src = "images/2.jpg" width = "640px" height = "250px">
						<p class = "box">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. 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.</p>
					</div>
					<div class = "games">
						<img src = "images/3.jpg" width = "640px" height = "250px">
						<p class = "box">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. 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.</p>
					</div>
					<div class = "games">
						<img src = "images/4.jpg" width = "640px" height = "250px">
						<p class = "box">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. 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.</p>
					</div>
					<div class = "games">
						<img src = "images/5.jpg" width = "640px" height = "250px">
						<p class = "box">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. 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.</p>
					</div>
					<div class = "games">
						<img src = "images/6.jpg" width = "640px" height = "250px">
						<p class = "box">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. 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.</p>
					</div>
            </div>
      </div>

     

</body>


<div class = "footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</html>

html css image text responsiveness

01.05.2018 13:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 106

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это происходит потому, что вы используете position: absolute, и, когда дочерний элемент имеет это свойство, родительский элемент будет игнорировать его высоту, чтобы вычислить его автоматический размер. Таким образом, высота элемента равна однозначно, заданная изображением. Когда вы изменяете размер своего браузера, текст будет располагаться на нескольких строках, но высота div не изменится!

Чтобы решить эту проблему, у вас есть два решения:

Используйте фиксированную высоту, если вы уверены, что ваш текст никогда не превысит эту высоту (это немного рискованно).
Используйте position: relative вместо position: absolute. Это не приведет к выравниванию текста и изображения в одной строке, но вы можете использовать другие решения для этой проблемы (и я также добавил еще один!).

01.05.2018 14:48

Другие вопросы по теме

Bootstrap: изображения выравниваются по левой стороне страницы при использовании карусели

Можете ли вы помочь мне сделать такую навигационную панель?

Как выбрать детали проекта из меню боковой панели в html?

IE 11 печатает пустую страницу, кроме последней

Как заставить строку и ее столбцы использовать 100% высоты своего родительского элемента (jumbotron)

Переместить раскрывающееся меню начальной загрузки в другую сторону

Постоянное визуальное изменение через чистый CSS / HTML после нажатия кнопки ввода (type = file)

Сохранять заголовок таблицы видимым без отображения полос прокрутки в теле таблицы

Как показать детали выбранного класса в html?

Псевдоэлемент в классе не работает должным образом

HTML / CSS: как сделать так, чтобы текст вокруг изображения соответствовал размеру окна?

Ответы 1

Другие вопросы по теме

Похожие вопросы