如果窗口调整文本“插入自身”并且按钮被按下。 按钮无处不在。我希望它们在针对不同视口(viewport)调整窗口大小时始终位于同一位置。
section {
justify-content: center;
flex-wrap: wrap;
display: inline-flex;
width: 100%;
}
section article {
position: relative;
background-color: white;
width: 30%;
margin: 1em;
}
section article p {
max-width: 30em;
color: black;
font-size: 1em;
}
section article button {
color: white;
padding: 0.5em 0.5em;
text-align: center;
background-color: #F6861F;
}
/* Tablet size*/
@media screen and (max-width: 67em) {
section article {
width: 40%;
}
/* Mobile Size formulier. */
@media screen and (max-width: 40em) {
section article {
width: 95%;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<section>
<article>
<p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae
sapien ut libero venenatis faucibus.</p>
<a href="">
<button>Test</button>
</a>
<a href="">
<button>Test</button>
</a>
</article>
<article>
<p>
Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum
nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id
</p>
<a>
<button>Test</button>
</a>
<a>
<button>Test</button>
</a>
</article>
<article>
<p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum
primis in faucibus orci luctus et</p>
<a>
<button>Test</button>
</a>
<a>
<button>Test</button>
</a>
</article>
<article>
<p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
sem libero volutpat nibh, nec pellente</p>
<button>Test</button>
<button>Test</button>
</article>
<article>
<p>Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus.
Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh.</p>
<a href="">
<button>Test</button>
</a>
<a>
<button>Test</button>
</a>
</article>
<article>
<p>Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut
a nisl id ante tempus hendrerit. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue au</p>
<a>
<button>Test</button>
</a>
<a>
<button>Test</button>
</a>
</article>
</body>
</html>最佳答案
你应该将按钮包装到一些容器中，我会使用这样的东西:
<article>
<p>Long lorem ipsum text goes here...</p>
<div class="actions">
<a href="">
<button>Test</button>
</a>
<a href="">
<button>Test</button>
</a>
</div>
</article>
<article>....</article>
然后在您已有的那些之上添加几行 css:
.actions {
display: flex;
align-self: flex-end;
}
section article {
position: relative;
background-color: white;
width: 30%;
margin: 1em;
/* added style */
display: flex;
flex-direction: column;
flex-flow: inherit;
}
对于非常大的显示器，我会删除一行 css:
section article p {
/* -- if You whant to make some limits make it on all section or at least on article */
/*max-width: 30em;*/
color: black;
font-size: 1em;
}
关于html - 如何确保按钮在调整文本大小时保持相同的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41680998/