英文:
How do I prevent my elements leaking out of my webpage?
问题
以下是您提供的内容的中文翻译：
每当我降低图像的分辨率时，卡片并不会随着页面而变小。相反，它们只是停留在原地并溢出页面。我如何使卡片像其他网站一样随页面变小？以及如何使卡片在变得足够小之后转到下一行？
@font-face {
font-family: 'LemonMilkMed';
src: url(LemonMilkMed.ttf);
}
@font-face {
font-family: 'PoppinMed';
src: url(Poppins-Medium.ttf);
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #222222;
margin: auto;
}
li, a, button {
font-family: 'LemonMilkMed', sans-serif;
font-size: 16px;
color: #FCFBF8;
text-decoration: none;
font-weight: 100;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 15px 5%;
background-color: rgb(55, 55, 55);
border: none;
padding: 8px;
background-size: 100px 90px;
text-shadow: #a1a1a1;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}
.Pages {
list-style: none;
text-align: center;
align-content: center;
}
.Pages li a {
transition: all 0.3s ease 0s;
}
.Pages li a:hover {
color: #0082a2;
}
.pricingbut {
margin-left: 30px;
padding: 9px 25px;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
background: #d74256;
box-shadow: 1px 1px 5px rgba(238, 56, 56, 0.565);
}
.pricingbut:hover {
background: #ca3e51;
box-shadow: 1px 1px 0px rgba(238, 56, 56, 0.565);
}
.Pages {
list-style: none;
word-spacing: 25px;
justify-content: center;
}
.Pages li {
display: inline-block;
}
.Pages li a {
transition: all 0.3s ease 0s;
}
.Pages li a:hover {
color: #ff6675;
}
.header h1 {
font-family: 'LemonMilkMed';
color: #FCFBF8;
text-align: center;
font-size: 20px;
text-shadow: #a1a1a1;
}
.header {
padding: 10px 30px;
}
@font-face {
font-family: 'PoppingMed';
src: url(Poppins-Medium.ttf);
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
.card-wrap {
margin:0px;
padding:0px;
box-sizing: border-box;
}
body {
background: linear-gradient(to right, #262626, #303030);
background-size: 100%;
}
:root {
--color-text: #616161;
--color-text-btn: #eeeeee;
--card1-gradient-color1: #f12711;
--card1-gradient-color2: #f5af19;
--card2-gradient-color1: #7F00FF;
--card2-gradient-color2: #E100FF;
--card3-gradient-color1: #3f2b96;
--card3-gradient-color2: #a8c0ff;
--card4-gradient-color1: #11998e;
--card4-gradient-color2: #38ef7d;
}
.card-wrap {
width: 220px;
background: #262626;
border-radius: 20px;
border: 5px solid #363636;
overflow: hidden;
color: var(--color-text);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
rgba(0, 0, 0, 0.23) 0px 6px 6px;
gap: 30px;
align-items: center;
font-family: 'Roboto', sans-serif;
justify-content: center;
flex-wrap: wrap;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
transition: all 0.4s ease;
}
.card-wrap:hover {
transform: scale(1.05);
}
.card-header {
height: 200px;
width: 100%;
background: red;
border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
display: grid;
place-items: center;
}
.card-header i {
color: #fff;
font-size: 72px;
}
.card-content {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
margin: 0 auto;
}
.card-title {
text-align: center;
text-transform: uppercase;
font-size: 16px;
margin-top: 10px;
margin-bottom: 20px;
}
.card-text {
text-align: center;
font-size: 12px;
margin-bottom: 20px;
color: #979797;
}
.card-btn {
transition: all 0.4s ease;
border: none;
border-radius: 100px;
padding: 5px 30px;
color: #fff;
margin-bottom: 15px;
text-transform: uppercase;
}
.card-header.one {
background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-header.two {
background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-header.three {
background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-header.four {
background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}
.card-btn.one {
background: linear-gradient(to left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-btn.two {
background: linear-gradient(to left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card
<details>
<summary>英文:</summary>
[Screenshot sample](https://i.stack.imgur.com/DjHB6.png).
Whenever I reduce the resolution of the image, the cards doesn't get smaller with the page. Instead, they just stay where they are and leak out of the page. How can I make the cards get smaller with the page like all other websites? And how can I make the cards go to the next line after they get small enough?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@font-face {
font-family: 'LemonMilkMed';
src: url(LemonMilkMed.ttf);
}
@font-face {
font-family: 'PoppinMed';
src: url(Poppins-Medium.ttf);
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #222222;
margin: auto;
}
li, a, button {
font-family: 'LemonMilkMed', sans-serif;
font-size: 16px;
color: #FCFBF8;
text-decoration: none;
font-weight: 100;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 15px 5%;
background-color: rgb(55, 55, 55);
border: none;
padding: 8px;
background-size: 100px 90px;
text-shadow: #a1a1a1;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}
.Pages {
list-style: none;
text-align: center;
align-content: center;
}
.Pages li a {
transition: all 0.3s ease 0s;
}
.Pages li a:hover {
color: #0082a2;
}
.pricingbut {
margin-left: 30px;
padding: 9px 25px;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
background: #d74256;
box-shadow: 1px 1px 5px rgba(238, 56, 56, 0.565);
}
.pricingbut:hover {
background: #ca3e51;
box-shadow: 1px 1px 0px rgba(238, 56, 56, 0.565);
}
.Pages {
list-style: none;
word-spacing: 25px;
justify-content: center;
}
.Pages li {
display: inline-block;
}
.Pages li a {
transition: all 0.3s ease 0s;
}
.Pages li a:hover {
color: #ff6675;
}
.header h1 {
font-family: 'LemonMilkMed';
color: #FCFBF8;
text-align: center;
font-size: 20px;
text-shadow: #a1a1a1;
}
.header {
padding: 10px 30px;
}
@font-face {
font-family: 'PoppingMed';
src: url(Poppins-Medium.ttf);
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
.card-wrap {
margin:0px;
padding:0px;
box-sizing: border-box;
}
body {
background: linear-gradient(to right, #262626, #303030);
background-size: 100%;
}
:root {
--color-text: #616161;
--color-text-btn: #eeeeee;
--card1-gradient-color1: #f12711;
--card1-gradient-color2: #f5af19;
--card2-gradient-color1: #7F00FF;
--card2-gradient-color2: #E100FF;
--card3-gradient-color1: #3f2b96;
--card3-gradient-color2: #a8c0ff;
--card4-gradient-color1: #11998e;
--card4-gradient-color2: #38ef7d;
}
.card-wrap {
width: 220px;
background: #262626;
border-radius: 20px;
border: 5px solid #363636;
overflow: hidden;
color: var(--color-text);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
rgba(0, 0, 0, 0.23) 0px 6px 6px;
gap: 30px;
align-items: center;
font-family: 'Roboto', sans-serif;
justify-content: center;
flex-wrap: wrap;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
transition: all 0.4s ease;
}
.card-wrap:hover {
transform: scale(1.05);
}
.card-header {
height: 200px;
width: 100%;
background: red;
border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
display: grid;
place-items: center;
}
.card-header i {
color: #fff;
font-size: 72px;
}
.card-content {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
margin: 0 auto;
}
.card-title {
text-align: center;
text-transform: uppercase;
font-size: 16px;
margin-top: 10px;
margin-bottom: 20px;
}
.card-text {
text-align: center;
font-size: 12px;
margin-bottom: 20px;
color: #979797;
}
.card-btn {
transition: all 0.4s ease;
border: none;
border-radius: 100px;
padding: 5px 30px;
color: #fff;
margin-bottom: 15px;
text-transform: uppercase;
}
.card-header.one {
background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-header.two {
background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-header.three {
background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-header.four {
background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}
.card-btn.one {
background: linear-gradient(to left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-btn.two {
background: linear-gradient(to left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-btn.three {
background: linear-gradient(to left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-btn.four {
background: linear-gradient(to left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}
.card-btn.one:hover {
opacity: 80%;
}
.card-btn.two:hover {
opacity: 80%;
}
.card-btn.three:hover {
opacity: 80%;
}
.card-btn.four:hover {
opacity: 80%;
}
#one {
margin-top: 100px;
margin-left: 130px;
}
#two {
margin-top: -393px;
margin-left: 395px;
}
#three {
margin-top: -393px;
margin-left: 655px;
}
#four {
margin-top: -393px;
margin-left: 920px;
}
<!-- language: lang-html -->
<header class="header">
<ul class="Pages">
<li><a href="HomePage.html">Home</a></li>
<li><a href="ContentPage.html">Content</a></li>
<li><a href="AboutPage.html">About</a></li>
</ul>
<a class="Pricing" href="PricingPage.html"><button class="pricingbut">Pricing</button></a>
</header>
<div class="card-wrap" id="one">
<div class="card-header one">
<i class="fas fa-code"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn one">get</button></a>
</div>
</div>
<div class="card-wrap" id="two">
<div class="card-header two">
<i class="fab fa-css3-alt"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn two">get</button></a>
</div>
</div>
<div class="card-wrap" id="three">
<div class="card-header three">
<i class="fab fa-html5"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn three">get</button></a>
</div>
</div>
<div class="card-wrap" id="four">
<div class="card-header four">
<i class="fab fa-js-square"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn four">get</button></a>
</div>
</div>
<!-- end snippet -->
I tried using overflow in CSS but it didn't work, not sure if I was using it in the wrong place.
</details>
# 答案1
**得分**: 2
不要使用边距来放置页面元素：
```css
#four {
margin-top: -393px;
margin-left: 920px;
}
这基本上是在说，“无论屏幕大小或容器限制如何，始终将此元素放置在离边缘的这个距离。” 当然，这不会考虑屏幕大小或容器限制等因素。
相反，将这些“卡片”放入一个包含元素中，该元素使用 display: flex; 样式进行动态排列。也许类似这样：
#cards-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
justify-content: center;
}
我已经为四个“卡片”周围添加了一个 #cards-container，并在CSS末尾添加了一个样式规则来替代您为每个“卡片”设置的明确边距样式。您可以根据需要使用不同的CSS flex选项来调整此容器的样式。
英文:
Don't use margins to place elements on the page:
#four {
margin-top: -393px;
margin-left: 920px;
}
It's basically saying, "No matter what the screen size or container limits, always put this element exactly this far from the edge." Which of course won't take into consideration things like screen size or container limits.
Instead, put these "cards" into a containing element which uses display: flex; styling to arrange them dynamically. Perhaps something like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@font-face {
font-family: 'LemonMilkMed';
src: url(LemonMilkMed.ttf);
}
@font-face {
font-family: 'PoppinMed';
src: url(Poppins-Medium.ttf);
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #222222;
margin: auto;
}
li, a, button {
font-family: 'LemonMilkMed', sans-serif;
font-size: 16px;
color: #FCFBF8;
text-decoration: none;
font-weight: 100;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 15px 5%;
background-color: rgb(55, 55, 55);
border: none;
padding: 8px;
background-size: 100px 90px;
text-shadow: #a1a1a1;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}
.Pages {
list-style: none;
text-align: center;
align-content: center;
}
.Pages li a {
transition: all 0.3s ease 0s;
}
.Pages li a:hover {
color: #0082a2;
}
.pricingbut {
margin-left: 30px;
padding: 9px 25px;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
background: #d74256;
box-shadow: 1px 1px 5px rgba(238, 56, 56, 0.565);
}
.pricingbut:hover {
background: #ca3e51;
box-shadow: 1px 1px 0px rgba(238, 56, 56, 0.565);
}
.Pages {
list-style: none;
word-spacing: 25px;
justify-content: center;
}
.Pages li {
display: inline-block;
}
.Pages li a {
transition: all 0.3s ease 0s;
}
.Pages li a:hover {
color: #ff6675;
}
.header h1 {
font-family: 'LemonMilkMed';
color: #FCFBF8;
text-align: center;
font-size: 20px;
text-shadow: #a1a1a1;
}
.header {
padding: 10px 30px;
}
@font-face {
font-family: 'PoppingMed';
src: url(Poppins-Medium.ttf);
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
.card-wrap {
margin:0px;
padding:0px;
box-sizing: border-box;
}
body {
background: linear-gradient(to right, #262626, #303030);
background-size: 100%;
}
:root {
--color-text: #616161;
--color-text-btn: #eeeeee;
--card1-gradient-color1: #f12711;
--card1-gradient-color2: #f5af19;
--card2-gradient-color1: #7F00FF;
--card2-gradient-color2: #E100FF;
--card3-gradient-color1: #3f2b96;
--card3-gradient-color2: #a8c0ff;
--card4-gradient-color1: #11998e;
--card4-gradient-color2: #38ef7d;
}
.card-wrap {
width: 220px;
background: #262626;
border-radius: 20px;
border: 5px solid #363636;
overflow: hidden;
color: var(--color-text);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
rgba(0, 0, 0, 0.23) 0px 6px 6px;
gap: 30px;
align-items: center;
font-family: 'Roboto', sans-serif;
justify-content: center;
flex-wrap: wrap;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
transition: all 0.4s ease;
}
.card-wrap:hover {
transform: scale(1.05);
}
.card-header {
height: 200px;
width: 100%;
background: red;
border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
display: grid;
place-items: center;
}
.card-header i {
color: #fff;
font-size: 72px;
}
.card-content {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
margin: 0 auto;
}
.card-title {
text-align: center;
text-transform: uppercase;
font-size: 16px;
margin-top: 10px;
margin-bottom: 20px;
}
.card-text {
text-align: center;
font-size: 12px;
margin-bottom: 20px;
color: #979797;
}
.card-btn {
transition: all 0.4s ease;
border: none;
border-radius: 100px;
padding: 5px 30px;
color: #fff;
margin-bottom: 15px;
text-transform: uppercase;
}
.card-header.one {
background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-header.two {
background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-header.three {
background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-header.four {
background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}
.card-btn.one {
background: linear-gradient(to left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-btn.two {
background: linear-gradient(to left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-btn.three {
background: linear-gradient(to left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-btn.four {
background: linear-gradient(to left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}
.card-btn.one:hover {
opacity: 80%;
}
.card-btn.two:hover {
opacity: 80%;
}
.card-btn.three:hover {
opacity: 80%;
}
.card-btn.four:hover {
opacity: 80%;
}
#cards-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
justify-content: center;
}
<!-- language: lang-html -->
<header class="header">
<ul class="Pages">
<li><a href="HomePage.html">Home</a></li>
<li><a href="ContentPage.html">Content</a></li>
<li><a href="AboutPage.html">About</a></li>
</ul>
<a class="Pricing" href="PricingPage.html"><button class="pricingbut">Pricing</button></a>
</header>
<div id="cards-container">
<div class="card-wrap" id="one">
<div class="card-header one">
<i class="fas fa-code"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn one">get</button></a>
</div>
</div>
<div class="card-wrap" id="two">
<div class="card-header two">
<i class="fab fa-css3-alt"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn two">get</button></a>
</div>
</div>
<div class="card-wrap" id="three">
<div class="card-header three">
<i class="fab fa-html5"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn three">get</button></a>
</div>
</div>
<div class="card-wrap" id="four">
<div class="card-header four">
<i class="fab fa-js-square"></i>
</div>
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#"><button class="card-btn four">get</button></a>
</div>
</div>
</div>
<!-- end snippet -->
All I've done here is added a <div id="cards-container"> around the four "cards" and added a style rule for that container at the end of the CSS (replacing the explicit margin styling you had for each "card").
You can adjust the styling in this container with different CSS flex options as needed.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论