HTML / CSS: как заставить текст вокруг изображения соответствовать размеру окна? - PullRequest
Новая
       18

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

0 голосов
/ 01 мая 2018

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

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>

1 Ответ

0 голосов
/ 01 мая 2018

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

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

  • Используйте фиксированную высоту , если вы уверены, что ваш текст никогда не превысит эту высоту (это немного рискованно).

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

...