0
Если окно изменяет размер текста, «толкает себя», а button сбрасывается. button s повсюду. Я хочу, чтобы они всегда находились в одном и том же месте при изменении размера окна для разных видовых экранов.Как заставить кнопки оставаться на одной высоте при изменении размера текста?
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>