英文:
Question about positioning of elements while changing resolution (updated)
问题
I am new at programming and I need help with the positioning of elements while changing the resolution of my website. The code now works on the default desktop resolution (1920 x 1080). While changing resolution or holding CTRL and scrolling in it the text in expandedButton changes its location and it looks very bad (it goes outside the border and it doesn't adjust itself so it fits in the border). How can I make the position of that if I scroll to automatically adjust that it looks good? I would appreciate any help. Thank you very much.
英文:
I am new at programming and I need help with the positioning of elements while changing the resolution of my website. The code now works on the default desktop resolution (1920 x 1080). While changing resolution or holding CTRL and scrolling in it the text in expandedButton changes its location and it looks very bad (it goes outside the border and it doesn't adjust itself so it fits in the border). How can I make the position of that if I scroll to automatically adjust that it looks good? I would appreciate any help. Thank you very much.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mano ateitis</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="Pagrindinis" class="hidden">
<div>
<h2>Mano ateitis su technologijomis</h2>
</div>
<div id="pagr2">
<div>
<button class="Mygtukas"><i class="fa-solid fa-bars"></i><br>Dabartis</button>
<div id="expandedButton">
<h3>Dabartiniai mokslai ir technologijos</h3>
<div id="scroll-container">
<div id="scroll-text">
<p> Dar visai neseniai buvau tik gimnazijos mokinys, kuris tik naudojosi sukurtais produktais. Žaidžiant ar naršant Internete visada buvo labai įdomu, kaip visa tai padaryta. Labai norėjau pats kurti Internetinius puslapius, o gal net pabandyti sukurti žaidimą.
<br/><br/>
Dabar esu gimnazistas. Savarankiškai stengiuosi išmokti programuoti, kad galėčiau pats pradėti kurti ir tobulinti įvairius programinius įrankius. Noriu išmokti pats sukurti Internetinius puslapius, kad ir aš galėčiau prisidėti prie informacijos sklaidos.
<br/><br/>
Labai noriu, kad mokytojai ir dėstytojai daugiau naudotų technologinių naujovių perduodami mums savo žinias. Mano manymu, laikas mokykloje pradėti naudoti tokias technologijas:
<br/><br/>
* Virtualūs laboratorijos eksperimentai – padeda mokiniams atlikti mokomuosius bandymus, kuriuos būtų sudėtinga atlikti tikrovėje, saugioje virtualioje aplinkoje.
<br/><br/>
* Augmented Reality (AR) ir Virtual Reality (VR) technologijos – šie inovatyvūs įrankiai leidžia mokiniams patirti aplinką, veiklas bei objektus tiesiog mokykloje.
<br/><br/>
* Programavimo mokymas – įdiegiant kompiuterių programavimo pamokas, mokiniams suteikiama galimybė išmokti kurti programinę įrangą ir suprasti, kaip veikia technologijos.<br/><br/>
* Personalizuotas mokymasis naudojant AI – AI pagrindu parengtos mokymosi programos gali padėti individualizuoti kiekvieno mokinio mokymosi strategijas. Naudojant invidualiai parengtas užduotis ir medžiagą pagal jų poreikius ir pažangą.
<br/><br/>
Gal ir aš galiu padėti mokytojams tai padaryti !?
</p>
</div>
</div>
<!-- <div id="paveik">
<img src="" alt="programming image" id="image">
</div> -->
</div>
</div>
<div>
<button class="Mygtukas1">Netolima ateitis</button>
<div id="expandedButton1">
<h3>Mano būsimos profesijos ir pasirinktos<br/> technologijos</h3>
<p>Technologijos nuolat tobulėja ir keičiasi, tiesiogiai keičia mūsų gyvenimo būdą. Žvelgdami į ateitį, matome daug naujų technologinių pokyčių, kurie turės didelę įtaką mūsų kasdienybei ir netgi visuomenės vystymuisi. <br/><br/>Galvoju, kad baigęs mokyklą rinksiuosi programuotojo, o gal IT saugumo specialisto kelią, o gal didelių duomenų (Big Data) analitiko kelią? Taip pat galvoju, kad dar atsiras naujos specialybės, susijusios su dirbtiniu intelektu (AI), daiktų internetu (IoT), išmaniaisiais namais, o gal net centrinių bankų skaitmeninės valiutos (CBDC) tobulinimu ir panaudojimu kasdieniniame gyvenime bei verslo ir mokslo aplinkoje.
</p>
</div>
</div>
<div>
<button class="Mygtukas2">Naujovės</button>
<div id="expandedButton2">
<h3>Technologinės naujovės ir jų įtaka mano ateities planams</h3>
<div id="scroll-container">
<div id="scroll-text">
<p>Galvoju, kad technologijų naujovės turės reikšmingą įtaką mano ateities planams įvairiais aspektais. Štai keletas pavyzdžių, kaip technologijos gali paveikti mano gyvenimą ir karjerą:
<br/><br/>
Darbo rinka. Automatizacija, dirbtinis intelektas (AI) ir robotizacija gali pakeisti darbo rinką ir įgūdžių poreikį. Vietoj senųjų specialybių, ateityje gali prireikti naujų, susijusių su IT, programavimu arba duomenų analize.
<br/><br/>
Sveikata. Naujos technologijos sparčiai keičia sveikatos sektorių. Telemedicina, 3D spausdinimas ir AI gali keisti sveikatos priežiūros paslaugas ir jų kainas iš esmės, o tai suteikia galimybę naujiems karjeros posūkiams sveikatos pramonėje.
<br/><br/>
Bendravimo priemonės. Socialinės medijos, virtualios realybės technologijos ir mobilieji telefonai toliau keičia mūsų bendravimo įpročius. Jie verčia mus prisitaikyti prie naujos informacinės erdvės ir naujos gyvenimo tėkmės.
<br/><br/>
Kaip matome iš pavyzdžių, viena iš didžiausių ateities technologijų dabartyje yra dirbtinis intelektas (AI). Manau, kad jis iš esmės gali pakeisti mokslą, verslą, mediciną ir kitas sritis. Galvoju, kad dirbtinis intelektas padidins įvairių sričių efektyvumą bei kokybę. Tačiau kartu gali iškilti daug teisinių ir etikos iššūkių. Tokių kaip intelektinė nuosavybė bei teisinė atsakomybė už AI padarytus veiksmus bei priimtus sprendimus. Todėl galvoju, kad kol baigsiu mokyklą, visi šie iššūkiai gali pakoreguoti mano planus, nes atsiras poreikis naujų sričių specialistams.</p>
</div>
</div>
</div>
</div>
<div>
<button class="Mygtukas3">Neigiamas poveikis</button>
<div id="expandedButton3">
<h3>Neigiamas technologijos poveikis ekonominei ir <br/>socialinei aplinkai</h3>
<div id="scroll-container">
<div id="scroll-text">
<p>Technologijos turi didelę įtaką ekonominei ir socialinei aplinkai. Labai nesmagu pripažinti, kad tarp visų teigiamų aspektų yra ir daug neigiamų.
<br/><br/>
* Darbo vietų praradimas Automatizacija ir robotizacija kelia grėsmę žmonių darbo vietoms daugelyje sektorių, nes kompiuteriai, robotai ir kitos technologijos yra efektyvesni už žmogaus darbą.
<br/><br/>
* Socialinė atskirtis Technologijų prieinamumas yra nevienodas įvairiems visuomenės sluoksniams. Todėl gali atsirasti "skaitmeninė atskirtis", kai tam tikros visuomenės grupės neturi galimybės naudotis moderniomis technologijomis.
<br/><br/>
* Privatumo stoka Technologijų, tokių kaip socialinės medijos ar internetiniai slapukai, naudojimas gali smarkiai pažeisti asmens privatumą ir saugumą.
<br/><br/>
* Psichologinės ir socialinės problemos Kompiuteriniai žaidimai, socialinės medijos ir interneto priklausomybė gali sukelti psichologines ir socialines problemas, tokias kaip uždarumas, nepasitikėjimas, depresija ar šeimų konfliktai. <br/> <br/>Vis dėlto svarbu pabrėžti, kad technologijų plėtrą reikia palaikyti, tačiau visada siekti švietimo bei aiškaus reglamentavimo. Tai padėtų mažinti neigiamą technologijų poveikį ir užtikrintų teigiamą ekonomikos bei visuomenės vystymąsi.</p>
</div>
</div>
</div>
<!-- <img src="./images/medium-shot-man-wearing-vr-glasses.jpg" alt=""> -->
</div>
<div>
<button class="Mygtukas4">Teigiamas poveikis</button>
<div id="expandedButton4">
<h3>Teigiamas technologijos poveikis ekonominei ir<br/> socialinei aplinkai</h3>
<div id="scroll-container">
<div id="scroll-text">
<p>Technologijų plėtra, be abejo, yra vienas iš pagrindinių veiksnių, kuris veikia ekonominį ir socialinį vystymąsi visame pasaulyje. Teigiamas technologijų poveikis ekonominei ir socialinei aplinkai yra daugialypis:
<br/> <br/>
* Produktyvumo didėjimas. Naujos technologijos leidžia efektyviau naudoti išteklius, mažina gamybos laiką ir didina produktyvumą. Dėl didesnio produktyvumo įmonės gali gaminti daugiau prekių ir paslaugų su mažesnėmis išlaidomis, o tai prisideda prie ekonominio augimo ir naujų darbo vietų kūrimo.
<br/> <br/>
* Naujų pramonės šakų kūrimasis. Naujausios technologijos yra varomoji jėga naujų pramonės šakų atsiradimui, tokias kaip informacinių ir ryšių technologijų (IRT), skaitmeninės ekonomikos, biotechnologijų ir atsinaujinančių energijos šaltinių sritys.
<br/> <br/>
* Darbo vietų kūrimas. Nors technologijų plėtra gali turėti neigiamo poveikio tam tikroms darbo vietoms, vis dėlto visuotinis efektas yra teigiamas. Technologijų plėtra sukuria naujas specializuotas darbo vietas inžinieriams, programuotojams, dizaineriams ir kitoms profesijoms, kurios tiesiogiai susijusios su technologijų vystymu ir jų taikymu.
<br/> <br/>
* Susisiekimo ir informacijos sklaidos spartėjimas. Moderniosios technologijos palengvina informacijos mainus, leidžia greičiau ir efektyviau vykdyti verslo ir komunikacijos procesus. Tai savo ruožtu padeda gerinti prekybos ir investicijų sąlygas ir skatina ekonomiką.
<br/> <br/>
* Socialinė integracija: technologijos padeda sumažinti socialines įtampas ir padidina socialinės gerovės lygį, pavyzdžiui, skaitmeninės technologijos padeda pasiekti ir integravo nuošaliuose regionuose gyvenančius žmones, palengvina neįgaliųjų dalyvavimą visuomenėje.
<br/> <br/>
* Švietimas ir mokymasis. Technologijų plėtra leidžia patobulinti švietimą ir mokymąsi per internetą, atvirosios švietimo priemonės ir MOOC (Massive Open Online Courses) kursus, suteikia galimybes žmogui nuolat mokytis ir tobulėti visą gyvenimą.
<br/> <br/>
* Aplinkosaugos problemų mažinimas: technologiniai sprendimai taip pat padeda sumažinti ekologinį poveikį, efektyviau naudotis ištekliais, didinti energijos vartojimo efektyvumą ir rasti ekologiškesnių alternatyvų neekologiškoms technologijoms.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
.Mygtukas p{
color: rgb(0, 0, 0);
font-size: 17px;
}
section {
display: grid;
place-items: center;
align-content: center;
margin-top: 0px;
min-height: 0px;
margin-bottom: 100vh;
}
h2 {
font-family: Varela Round;
color: #3c96a4;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 15px;
font-size: 50px;
}
#pagr2 {
top: 0px;
padding-top: 0px;
margin-top: 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
button {
font-family: Open Sans, sans-serif;
letter-spacing: 6px;
font-weight: 999;
display: inline-block;
border: none;
background-color: #EBF4F7;
color: #55C9EA;
font-size: 21px;
width: 200px;
height: 90px;
flex: 0 0 200px;
right: 30px;
box-sizing: content-box;
margin-left: 20px;
margin-right: 20px;
}
button i {
opacity: 0.7;
}
#expandedButton {
display: block;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 55%;
max-width: 5500px;
height: 90%;
max-height: 6000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton p{
font-size: 24px;
width: 80%;
position: fixed;
right: 20%;
bottom: 130px;
background-color: #f2f2f2;
color: black;
text-align: center;
}
#expandedButton h3{
background-color: #f2f2f2;
color: #3c96a4;
position: fixed;
top: 50px;
right: 300px;
font-size: 30px;
text-align: center;
}
#expandedButton1 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton1 p{
font-size: 24px;
width: 80%;
position: fixed;
right: 10%;
bottom: 80px;
background-color: #f2f2f2;
color: black;
text-align: center;
}
#expandedButton1 h3{
background-color: #f2f2f2;
position: fixed;
color: #3c96a4;
top: 50px;
right: 220px;
font-size: 30px;
align-items: center;
align-content: center;
text-align: center;
}
#expandedButton2 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton2 p{
font-size: 24px;
width: 80%;
position: fixed;
right: 10%;
bottom: 150px;
color: black;
background-color: #f2f2f2;
text-align: center;
}
#expandedButton2 h3{
background-color: #f2f2f2;
color: #3c96a4;
position: fixed;
top: 50px;
right: 101px;
font-size: 30px;
text-align: center;
}
#expandedButton3 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 390px;
padding-top: 180px;
margin-top: 420px;
box-sizing: border-box;
}
#expandedButton3 p{
font-size: 24px;
width: 90%;
position: fixed;
right: 5%;
bottom: 20px;
color: black;
background-color: #f2f2f2;
text-align: center;
}
#expandedButton3 h3{
background-color: #f2f2f2;
color: #3c96a4;
position: fixed;
top: 30px;
left: 170px;
font-size: 30px;
text-align: center;
}
#expandedButton4 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton4 p{
font-size: 24px;
width: 80%;
position: fixed;
right: 10%;
bottom: 30px;
color: black;
background-color: #f2f2f2;
text-align: center;
}
#expandedButton4 h3{
background-color: #f2f2f2;
position: fixed;
top: 20px;
color: #3c96a4;
left: 170px;
font-size: 30px;
text-align: center;
}
#expandedButton3 #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
bottom: 0px;
height: 450px;
width: 900px;
overflow: hidden;
right: 30px;
}
#expandedButton3 #scroll-container #scroll-text {
height: 78%;
text-align: center;
background-color: #f2f2f2;
margin-left: 0px;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#expandedButton #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
bottom: 0px;
height: 400px;
width: 1000px;
overflow: hidden;
}
#expandedButton #scroll-container #scroll-text {
height: 107%;
width: 120%;
text-align: center;
background-color: #f2f2f2;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#expandedButton4 #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
right: 25px;
bottom: 10px;
text-align: center;
align-items: center;
align-content: center;
display: block;
height: 400px;
width: 900px;
overflow: hidden;
}
#expandedButton4 #scroll-container #scroll-text {
height: 152%;
width: 100%;
text-align: center;
background-color: #f2f2f2;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#expandedButton2 #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
right: 25px;
bottom: 10px;
text-align: center;
align-items: center;
align-content: center;
display: block;
height: 400px;
width: 900px;
overflow: hidden;
}
#expandedButton2 #scroll-container #scroll-text {
height: 117%;
width: 100%;
text-align: center;
background-color: #f2f2f2;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
@-moz-keyframes my-animation {
from { -moz-transform: translateY(100%); }
to { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes my-animation {
from { -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(-100%); }
}
@keyframes my-animation {
from {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
const sections = document.querySelectorAll('section');
const expandedButton = document.getElementById('expandedButton');
const expandedButton1 = document.getElementById('expandedButton1');
const expandedButton2 = document.getElementById('expandedButton2');
const expandedButton3 = document.getElementById('expandedButton3');
const expandedButton4 = document.getElementById('expandedButton4');
const hideExpandedSections = () => {
if (expandedButton) {
expandedButton.style.display = 'none';
}
if (expandedButton1) {
expandedButton1.style.display = 'none';
}
if (expandedButton2) {
expandedButton2.style.display = 'none';
}
if (expandedButton3) {
expandedButton3.style.display = 'none';
}
if (expandedButton4) {
expandedButton4.style.display = 'none';
}
};
document.addEventListener('click', (event) => {
const targetElement = event.target;
if (
targetElement.classList.contains('Mygtukas') ||
targetElement.classList.contains('Mygtukas1') ||
targetElement.classList.contains('Mygtukas2') ||
targetElement.classList.contains('Mygtukas3') ||
targetElement.classList.contains('Mygtukas4')
) {
hideExpandedSections();
if (targetElement.classList.contains('Mygtukas') && expandedButton) {
expandedButton.style.display = 'block';
} else if (targetElement.classList.contains('Mygtukas1') && expandedButton1) {
expandedButton1.style.display = 'block';
} else if (targetElement.classList.contains('Mygtukas2') && expandedButton2) {
expandedButton2.style.display = 'block';
}
else if (targetElement.classList.contains('Mygtukas3') && expandedButton3) {
expandedButton3.style.display = 'block';
}
else if (targetElement.classList.contains('Mygtukas4') && expandedButton4) {
expandedButton4.style.display = 'block';
}
}
});
let image = document.getElementById('image');
let images = ['./images/programmer1.jpg', './images/programmer2.jpg', './images/programmer3.jpg', './images/programmer4.jpg', './images/programmer5.jpg'];
let previousIndex = -1;
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
image.src = images[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let futureimage = document.getElementById('futureimage');
let futureimages = ['./images/future1.jpg', './images/future2.jpg', './images/future3.jpg', './images/future4.jpg', './images/future5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
futureimage.src = futureimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let newimage = document.getElementById('newimage');
let newimages = ['./images/new1.jpg', './images/new2.jpg', './images/new3.jpg', './images/new4.jpg', './images/new5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
newimage.src = newimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let negimage = document.getElementById('negimage');
let negimages = ['./images/neg1.jpg', './images/neg2.jpg', './images/neg3.jpg', './images/neg4.jpg', './images/neg5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
negimage.src = negimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let posimage = document.getElementById('posimage');
let posimages = ['./images/pos1.jpg', './images/pos2.jpg', './images/pos3.jpg', './images/pos4.jpg', './images/pos5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
posimage.src = posimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
I tried changing the width and height to % rather than changing the display and position. I really need help on this one. Thanks.
答案1
得分: 0
这里有...相当多的内容。我建议退后几步，看看是否有更简单的方法来做事情。
以下是一个示例，我使用 flex 和 grid 处理了 6 个“按钮”，其中包含大量文本。我在包装元素的尺寸上使用了百分比%，在设置字体大小时使用了 em：
#wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}
#buttons {
width: 80%;
height: 20%;
padding: 5px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
border: 1px solid black;
}
.button {
font-size: 1em;
padding: 5px;
text-align: center;
border: 1px solid red;
}
<div id="wrapper">
<div id="buttons">
<div class="button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class="button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class="button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class="button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class="button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class="button">
Button with a lots of text, very much text a lot of text in this button
</div>
</div>
</div>
我个人发现对于字体大小来说，最糟糕的单位是使用%。当然，也不一定非要使用 em。我主要使用百分比% 和像素单位(px)，并没有遇到什么大问题——关键在于保持简单，合理地使用 border-box、margin、padding、flex 和 grid。
例如，一个很好的经验法则是，当你想要在父元素和子元素之间留出一些空间时，总是在父元素上使用 padding，而不是在子元素上使用 margin——当正确使用 CSS 时，通常事情会相对简单，问题也很少！
如果你有兴趣，以下是一些关于现代 CSS 的短视频：
英文:
There is... quite a lot going on here. I would suggest taking a few steps back and seeing if there is a simpler way to do things.
Here's an example where I handle 6 "buttons" with a lot of text by utilizing flex and grid. I use % with the wrapper element dimensions and em when I set the font-size:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}
#buttons {
width: 80%;
height: 20%;
padding: 5px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
border: 1px solid black;
}
.button {
font-size: 1em;
padding: 5px;
text-align: center;
border: 1px solid red;
}
<!-- language: lang-html -->
<div id = "wrapper">
<div id = "buttons">
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
</div>
</div>
<!-- end snippet -->
I have personally found that the worst possible unit for font-size is to use %. It doesn't have to be em either though. I mostly use just % and pixel units (px) and haven't had any major problems - it's all about keeping things simple, and using border-box, margin, padding, flex and grid (semi-)properly.
For example, one good rule of thumb is to always use padding on a parent element instead of margin on child elements when you want the parent and the children elements have a bit of space between them - when CSS is properly used, things usually stay relatively simple with very few problems!
Here's a couple of short videos about modern CSS, if you're interested:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论