如果窗口调整了文本的大小，那么＃34;会推动自己＆＃34;而且button被推倒了。 button到处都是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>{{1}}＆＃13;
答案 0 :(得分：0)
你应该将按钮包装到某个容器中，我会使用这样的东西：
<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;
}