HTML 和 CSS 中的響應式 CogWheel（齒輪）

Question

我正在制作一個響應式布局，但我對帶段落的響應式齒輪有問題，在這里你可以看到我在說什么https://justidea.vercel.app

調整瀏覽器大小，你會看到問題，問題是因為使用了 position absolute。

誰能為 CSS 齒輪推薦任何其他解決方案，以使其響應這些圓圈段落？

 html { font-size: 16px; } *, *:before, *:after { box-sizing: inherit; box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; }.mainsection { width: 100%; height: 1160px; background-color: #ffffff; }.mainsection h1 { color: #2f2f2f; text-align: center; margin-top: 70px; font-size: 33px; font-weight: bold; font-family: 'Hind', sans-serif; }.mainsection p { color: #80868c; text-align: center; font-size: 16px; font-family: 'Roboto', sans-serif; margin-top: 25px; }.little_circle { width: 80px; height: 80px; border-radius: 50%; background-color: #F4F7F9; position: relative; border: 2px solid #707070; } #little_one { bottom: 17em; left: 76em; background: url("Inteligentny\ obiekt\ wektorowy-1.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_one pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -96px; text-decoration: none; position: absolute; top: 20px; left: 190px; } #little_two { bottom: 22em; left: 38em; background: url("Inteligentny\ obiekt\ wektorowy-3.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_two a { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -210px; text-decoration: none; } #little_three { bottom: 18em; left: 40em; background: url("Inteligentny\ obiekt\ wektorowy-7.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_three pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -300px; text-decoration: none; } #little_four { bottom: 23em; left: 74em; background: url("Inteligentny\ obiekt\ wektorowy-6.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_four pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -219px; text-decoration: none; position: absolute; left: 310px; } #little_five { bottom: 855px; left: 1060px; background: url("Inteligentny\ obiekt\ wektorowy-11.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_five pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -164px; text-decoration: none; position: absolute; left: 270px; top: 15px; } #little_six { bottom: 51em; left: 73em; background: url("Inteligentny\ obiekt\ wektorowy-10.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_six pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -249px; text-decoration: none; position: absolute; left: 350px; top: 6px; } #little_seven { bottom: 66em; left: 57em; background: url("Inteligentny\ obiekt\ wektorowy-12.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_seven pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -92px; text-decoration: none; position: absolute; top: -50px; left: 87px; } #little_eight { bottom: 68em; left: 48em; background: url("Inteligentny\ obiekt\ wektorowy-9.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_eight pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -250px; text-decoration: none; } #little_nine { bottom: 66em; left: 41em; background: url("Inteligentny\ obiekt\ wektorowy-2.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_nine pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -350px; text-decoration: none; } #little_ten { bottom: 46em; left: 48em; background: url("Inteligentny\ obiekt\ wektorowy-8.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_ten pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -400px; text-decoration: none; } #little_eleven { bottom: 49em; left: 57em; background: url("Inteligentny\ obiekt\ wektorowy-11.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_eleven pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: 255px; text-decoration: none; } #little_twelve { bottom: 56em; left: 67em; background: url("Inteligentny\ obiekt\ wektorowy-5.png"); background-position: 50% 50%; background-repeat: no-repeat; } #little_twelve pa { color: #2F2F2F; font-size: 16px; font-family: 'Hind', sans-serif; margin-left: -270px; position: absolute; top: 120px; text-decoration: none; }.cogwheel img { display: block; margin-left: auto; margin-right: auto; margin-top: 198px; }.second-section-form { width: 100%; height: 630px; background-image: url("img2.png"); }.second-section-form h1 { padding-top: 40px; text-align: center; font-size: 30px; color: #ffffff; font-family: 'Hind', sans-serif; font-weight: bold; }.second-section-form p { text-align: center; color: #ffffff; font-size: 18px; margin-top: 15px; } input[type=text], select, textarea { width: 100%; padding: 12px; border-radius: 4px; resize: vertical; }.container { border-radius: 5px; padding: 20px; max-width: 950px; margin-left: auto; margin-right: auto; }.col-33 { float: left; width: 33.3%; margin-top: 6px; padding: 0px 0px 0px 10px; }.col-100 { float: left; width: 100%; margin-top: 6px; padding-left: 10px; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } @media (max-width: 960px) {.form input { margin: 0px 0; } input[type=submit] { width: 95%; margin-top: 20px; margin-left: auto; margin-right: auto; }.container-checkbox { margin-left: 15px; } }.form { flex-direction: column; align-items: stretch; }.container-checkbox { color: #ffffff; display: table; margin: 0 auto; font-size: 14px; font-family: 'Roboto', sans-serif; border-radius: 5px; }.blue-span { color: #35A8E0; }.btn { width: 165px; height: 50px; background-color: #35a8e0; border: none; color: #fff; font-weight: bold; border-radius: 5px; margin-top: 25px; margin-left: auto; margin-right: auto; display: block; }.btn:hover { background-color: dodgerblue; }

 <section class="mainsection"> <h1>Obszary naszych kompetencji</h1> <p>Pomagamy uczyć się na błędach innych. Wspieramy i rekomendujemy rozwiązania biznesowe.</p> <div class="cogwheel"> <img src="Grupa 193.png" alt="" class="img-gear"> <div class="little_circle" id="little_one"> <p><a href="https://www.w3schools.com">Prawo międzynarodowe</a></p> </div> <div class="little_circle" id="little_two"> <p><a href="https://www.w3schools.com">Crowdfunding</a></p> </div> <div class="little_circle" id="little_three"> <p><a href="https://www.w3schools.com">Podnoszenie produktywności</a></p> </div> <div class="little_circle" id="little_four"> <p><a href="https://www.w3schools.com">Finansowanie handlu międzynarodowego</a></p> </div> <div class="little_circle" id="little_five"> <p><a href="https://www.w3schools.com">Dotacje i granty międzynarodowe</a></p> </div> <div class="little_circle" id="little_six"> <p><a href="https://www.w3schools.com">Międzynarodowa księgowość, kadry i podatki</a></p> </div> <div class="little_circle" id="little_seven"> <p><a href="https://www.w3schools.com">Zarządzanie projektami</a></p> </div> <div class="little_circle" id="little_eight"> <p><a href="https://www.w3schools.com">Marketing 360º</a></p> </div> <div class="little_circle" id="little_nine"> <p><a href="https://www.w3schools.com">Ubezpieczenia międzynarodowe</a></p> </div> <div class="little_circle" id="little_ten"> <p><a href="https://www.w3schools.com">Komercjalizacja własności intelektualnej</a></p> </div> <div class="little_circle" id="little_eleven"> <p><a href="https://www.w3schools.com">Nieruchomości</a></p> </div> <div class="little_circle" id="little_twelve"> <p><a href="https://www.w3schools.com">Pozyskiwanie inwestorów (M&A)</a></p> </div> </div> </section> <section class="second-section-form"> <h1>Skontaktuj się z nami</h1> <p>Zadzwoń <span class="number">+ 48 535 015 835</span> lub wypełnij formularz.</p> <div class="form"> <div class="container"> <div class="row"> <div class="col-33"> <input type="text" name="firstname" placeholder="Imię i Nazwisko"> </div> <div class="col-33"> <input type="text" name="firstname" placeholder="Telefon"> </div> <div class="col-33"> <input type="text" name="firstname" placeholder="E-mail"> </div> </div><br> <div class="row"> </div> <div class="row"> <div class="col-33"> <input type="text" name="firstname" placeholder="Firma"> </div> <div class="col-33"> <select name="country"> <option value="">Ilość pracowników</option> <option value="">1</option> <option value="">2</option> </select> </div> <div class="col-33"> <select name="country"> <option value="">Roczny dochód firmy</option> <option value="">100</option> <option value="">200</option> </select> </div> </div><br> <div class="row"> <div class="col-100"> <textarea id="subject" name="subject" placeholder="Wiadomość" style="height:200px"></textarea> </div> </div> </div> <label class="container-checkbox"> <input type="checkbox"> <span class="checkmark">Zapozanałem(-łam) się z <span class="blue-span">Polityką prywatności</span> oraz z <span class="blue-span">Zastrzeżeniami prawnymi.</span></span> </label> <input type="submit" value="WYŚLIJ" class="btn"> </div> </section>

Answer 1

我建議對整個“齒輪”元素使用 svg。 svg 的各個部分可以用作錨點（即鏈接），如下例所示，來自：

https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/

 <img width=500 src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Target_Flat_Icon.svg" usemap="#image-map"> <map name="image-map"> <area target="_blank" alt="arrow" title="arrow" href="https://en.wikipedia.org/wiki/Arrow" coords="363,137,417,111,411,148,418,159,364,190,232,262,225,248,356,175,406,159,451,179,394,208,364,190,369,177,355,175,355,183,359,157" shape="poly"> <area target="_blank" alt="arrow" title="arrow" href="https://en.wikipedia.org/wiki/Arrow" coords="408,155,8" shape="circle"> <area target="_blank" alt="bullseye" title="" href="https://en.wikipedia.org/wiki/Bullseye_(target)" coords="227,253,38" shape="circle"> </map>

在您的示例中，文本和鏈接相對於頁面邊緣定位（通過bottom 、 top 、 left和right屬性，因此當您調整頁面大小時，它們將不可避免地遠離齒輪定位。