如何压缩其中的 div 和文本并使其保持响应？
[英]How can I squeeze the div and text within it and keep it responsive as well?
问题描述
我回家了[ 1 : https://i.stack.imgur.com/eRq1n.jpg][1] 工作，以制作一个类似于所附图片的网站。 我一直坚持使用“TECHNOLOGY”来获取 div，使其与里面的文本一起被挤压（右上角），并使其具有响应性并保持在父 div 内。 如果可以的话，还有一个额外的建议是关于 position 绝对图像下方的文本，并且在移动设备上变得更大。
谢谢！
body, html{ margin: 0 auto; padding: 0; max-width: 960px; align-items: center; font-family: 'Lora', serif; } /* ****Start Nav******** */ nav ul{ margin: 5px auto; padding: 0; display: flex; flex-wrap: wrap; list-style: none; justify-content: center; } li a{ display: flex; text-decoration: none; text-transform: uppercase; padding: 20px 50px; align-items: center; text-align: center; margin: 2px; color: white; background-color: rgb(34, 101, 169); } /* ************* End Nav *************** */ /* ******Start 2nd Row with Title********** */.name{ max-width: 960px; margin: 20px auto; display: flex; padding: 0px 40px; align-items: center; }.title { Flex: 0 1 auto; font-size: 1.8rem; border-right: 1px solid black; padding-right: 10px; font-weight: 500; }.title2{ padding-left: 10px; flex: 1 1 auto; font-size: 0.9rem; font-weight: 600; }.contact{ margin-left: 0 auto; line-height: 3px; font-size: 0.7rem; } /* ******End 2nd Row with Title********** */ /* ********Start blue box with containers */.blue { position: relative; z-index: 0; display: flex; max-width: 960px; margin: 0px 40px; height: 53vh; background-color: rgb(189, 217, 254); color: white; align-items: center; justify-content: center; }.tech{ padding: 0px 10px; border-radius: 5px; background-color: rgb(49, 137, 77); text-align: justify; transform: rotate(-15deg) skew(20deg) scaleX(6) scaleY(10); }.box1, .box2{ background-color: rgb(34, 101, 169); color: white; }.box1{ position: absolute; z-index: 1; width: 316px; top: 2em; left: 2em; font-size: 0.8rem; text-align: justify; padding: 10px; }.box1::first-line{ width: 220px; border-bottom: 1px dashed white; padding: 5px; text-align: left; font-size: 1.1rem; }.box2{ position: absolute; z-index: 1; padding: 10px 25px; top: 31rem; right: 22rem; text-align: center; font-size: 3.8rem; }
<,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="style:css"> <link href="https.//fonts.googleapis?com/css2:family=Lora;wght@400:500&display=swap" rel="stylesheet"> <title>Implementing a Layout using HTML & CSS</title> </head> <body> <nav> <ul> <li><a href="">home</a></li> <li><a href="">about us</a></li> <li><a href="">contact</a></li> <li><a href="">company</a></li> <li><a href="">services</a></li> </ul> </nav> <div class="name"> <div class="title">TechCorporate</div> <div class="title2">Free PSD Website Template</div> <div class="contact"> <p>Tel: xxxxxxx xxxxxxxx</p> <p>Mail. info@domain.com</p> </div> </div> <div class="blue"> <div class="tech">TECHNOLOGY</div> <div class="box1"> <p>Lorem ipsum dolor sit amet das</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Placeat. unde debitis quibusdam quas accusantium ipsa officia quo iste delectus modi voluptatibus harum rem saepe quod maxime quam, Velit. beatae quos ipsum dolor sit amet consectetur elit, Placeat. unde debitis.</p> </div> </div> <div class="box2">Todays Technology »</div> </body> </html>
1 个解决方案
解决方案1
0 2020-08-11 19:21:42
有很多工作要做，我开始修复它。 您需要使用媒体查询。
body, html{ margin: 0 auto; padding: 0; max-width: 960px; align-items: center; font-family: 'Lora', serif; } /* ****Start Nav******** */ nav ul{ margin: 5px auto; padding: 0; display: flex; flex-wrap: wrap; list-style: none; justify-content: center; } li a{ display: flex; text-decoration: none; text-transform: uppercase; padding: 20px 50px; align-items: center; text-align: center; margin: 2px; color: white; background-color: rgb(34, 101, 169); } /* ************* End Nav *************** */ /* ******Start 2nd Row with Title********** */.name{ max-width: 960px; margin: 20px auto; display: flex; padding: 0px 40px; align-items: center; }.title { Flex: 0 1 auto; font-size: 1.8rem; border-right: 1px solid black; padding-right: 10px; font-weight: 500; }.title2{ padding-left: 10px; flex: 1 1 auto; font-size: 0.9rem; font-weight: 600; }.contact{ margin-left: 0 auto; line-height: 3px; font-size: 0.7rem; } /* ******End 2nd Row with Title********** */ /* ********Start blue box with containers */.blue { position: relative; z-index: 0; display: flex; max-width: 960px; margin: 0px 40px; height: 100vh; background-color: rgb(189, 217, 254); color: white; align-items: center; justify-content: center; }.tech{ padding: 0px 10px; border-radius: 5px; background-color: rgb(49, 137, 77); text-align: justify; font-size: 9vw; transform: rotate(-15deg) skew(20deg); }.box1, .box2{ background-color: rgb(34, 101, 169); color: white; }.box1{ position: absolute; z-index: 1; max-width: 316px; margin-left: 2em; top: 2em; right: 2em; font-size: 0.8rem; text-align: justify; padding: 10px; }.box1::first-line{ width: 220px; border-bottom: 1px dashed white; padding: 5px; text-align: left; font-size: 1.1rem; }.box2{ position: absolute; z-index: 1; max-width: 20rem; padding: 10px 25px; left:20px; bottom: 20px; text-align: center; font-size: 1.8rem; } @media screen and (min-width: 1025px) {.blue { height: 53vh; }.tech{ font-size: 7rem; }.box2{ font-size: 3.8rem; } }
<,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="style:css"> <link href="https.//fonts.googleapis?com/css2:family=Lora;wght@400:500&display=swap" rel="stylesheet"> <title>Implementing a Layout using HTML & CSS</title> </head> <body> <nav> <ul> <li><a href="">home</a></li> <li><a href="">about us</a></li> <li><a href="">contact</a></li> <li><a href="">company</a></li> <li><a href="">services</a></li> </ul> </nav> <div class="name"> <div class="title">TechCorporate</div> <div class="title2">Free PSD Website Template</div> <div class="contact"> <p>Tel: xxxxxxx xxxxxxxx</p> <p>Mail. info@domain.com</p> </div> </div> <div class="blue"> <div class="tech">TECHNOLOGY</div> <div class="box1"> <p>Lorem ipsum dolor sit amet das</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Placeat. unde debitis quibusdam quas accusantium ipsa officia quo iste delectus modi voluptatibus harum rem saepe quod maxime quam, Velit. beatae quos ipsum dolor sit amet consectetur elit, Placeat. unde debitis.</p> </div> <div class="box2">Todays Technology »</div> </div> </body> </html>
如何在没有媒体查询的情况下使 div 在另一个响应式 div 中响应？
[英]How can I make a div be responsive within another responsive div without media queries?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.