javascript - 无论 div 的大小如何，都在一行中显示按钮

Question

我想在网站上显示 4 张图片，每张图片下面都有不同的描述。最后底部有一个按钮。由于每张图片的描述不同，行数不同，但div的大小应该相同，按钮位置应该与其他图片的所有按钮在一行。请查看附图以了解我的意思。

我想将按钮显示在与右侧最后一张图片“Andy Clarke”相同的行中。这样当我调整页面大小时，它就不会把它们弄乱。

请帮忙!

代码是:

html {
  box-sizing: border-box
}

*,
*:before,
*:after {
  box-sizing: inherit
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block
}

progress {
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],
template {
  display: none
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration: none;
}

a:active,
a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

dfn {
  font-style: italic
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

figure {
  margin: 1em 40px
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

button,
input,
select,
textarea {
  font: inherit;
  margin: 0
}

optgroup {
  font-weight: bold
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

textarea {
  overflow: auto
}

.ppl-font {
  font-family: 'Simonetta';
  font-size: 18px;
}

[type=checkbox],
[type=radio] {
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}


/* End extract */

html,
body {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5
}

html {
  overflow-x: hidden
}

h1 {
  font-size: 36px
}

h2 {
  font-size: 30px
}

h3 {
  font-size: 24px
}

h4 {
  font-size: 20px
}

h5 {
  font-size: 18px
}

h6 {
  font-size: 16px
}

.w3-serif {
  font-family: serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  margin: 10px 0
}

.w3-wide {
  letter-spacing: 4px
}

hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0
}

.w3-image {
  max-width: 100%;
  height: auto
}

img {
  margin-bottom: -5px
}

a {
  color: inherit
}

.w3-btn,
.w3-button {
  border: none;
  display: inline-block;
  outline: 0;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.w3-btn:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.w3-btn,
.w3-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
  cursor: not-allowed;
  opacity: 0.3
}

.w3-disabled *,
:disabled * {
  pointer-events: none
}

.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
  box-shadow: none
}

.w3-input {
  padding: 8px;
  display: block;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%
}

.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
  content: "";
  display: table;
  clear: both
}

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left;
  width: 100%;
}

.w3-col.s1 {
  width: 8.33333%
}

.w3-col.s2 {
  width: 16.66666%
}

.w3-col.s3 {
  width: 24.99999%
}

.w3-col.s4 {
  width: 33.33333%
}

.w3-col.s5 {
  width: 41.66666%
}

.w3-col.s6 {
  width: 49.99999%
}

.w3-col.s7 {
  width: 58.33333%
}

.w3-col.s8 {
  width: 66.66666%
}

.w3-col.s9 {
  width: 74.99999%
}

.w3-col.s10 {
  width: 83.33333%
}

.w3-col.s11 {
  width: 91.66666%
}

.w3-col.s12 {
  width: 99.99999%
}

@media (min-width:601px) {
  .w3-col.m1 {
    width: 8.33333%
  }
  .w3-col.m2 {
    width: 16.66666%
  }
  .w3-col.m3,
  .w3-quarter {
    width: 24.99999%
  }
  .w3-col.m4,
  .w3-third {
    width: 33.33333%
  }
  .w3-col.m5 {
    width: 41.66666%
  }
  .w3-col.m6,
  .w3-half {
    width: 49.99999%
  }
  .w3-col.m7 {
    width: 58.33333%
  }
  .w3-col.m8,
  .w3-twothird {
    width: 66.66666%
  }
  .w3-col.m9,
  .w3-threequarter {
    width: 74.99999%
  }
  .w3-col.m10 {
    width: 83.33333%
  }
  .w3-col.m11 {
    width: 91.66666%
  }
  .w3-col.m12 {
    width: 99.99999%
  }
}

@media (min-width:993px) {
  .w3-col.l1 {
    width: 8.33333%
  }
  .w3-col.l2 {
    width: 16.66666%
  }
  .w3-col.l3 {
    width: 24.99999%
  }
  .w3-col.l4 {
    width: 33.33333%
  }
  .w3-col.l5 {
    width: 41.66666%
  }
  .w3-col.l6 {
    width: 49.99999%
  }
  .w3-col.l7 {
    width: 58.33333%
  }
  .w3-col.l8 {
    width: 66.66666%
  }
  .w3-col.l9 {
    width: 74.99999%
  }
  .w3-col.l10 {
    width: 83.33333%
  }
  .w3-col.l11 {
    width: 91.66666%
  }
  .w3-col.l12 {
    width: 99.99999%
  }
}

.w3-content {
  max-width: 980px;
  margin: auto
}

.w3-rest {
  overflow: hidden
}

@media (max-width:600px) {
  .w3-modal-content {
    margin: 0 10px;
    width: auto!important
  }
  .w3-modal {
    padding-top: 30px
  }
  .w3-dropdown-hover.w3-mobile .w3-dropdown-content,
  .w3-dropdown-click.w3-mobile .w3-dropdown-content {
    position: relative
  }
  .w3-hide-small {
    display: none!important
  }
  .w3-mobile {
    display: block;
    width: 100%!important
  }
  .w3-bar-item.w3-mobile,
  .w3-dropdown-hover.w3-mobile,
  .w3-dropdown-click.w3-mobile {
    text-align: center
  }
  .w3-dropdown-hover.w3-mobile,
  .w3-dropdown-hover.w3-mobile .w3-btn,
  .w3-dropdown-hover.w3-mobile .w3-button,
  .w3-dropdown-click.w3-mobile,
  .w3-dropdown-click.w3-mobile .w3-btn,
  .w3-dropdown-click.w3-mobile .w3-button {
    width: 100%
  }
}

@media (max-width:768px) {
  .w3-modal-content {
    width: 500px
  }
  .w3-modal {
    padding-top: 50px
  }
}

@media (min-width:993px) {
  .w3-modal-content {
    width: 900px
  }
  .w3-hide-large {
    display: none!important
  }
  .w3-sidebar.w3-collapse {
    display: block!important
  }
}

@media (max-width:992px) and (min-width:601px) {
  .w3-hide-medium {
    display: none!important
  }
}

@media (max-width:992px) {
  .w3-sidebar.w3-collapse {
    display: none
  }
  .w3-main {
    margin-left: 0!important;
    margin-right: 0!important
  }
}

.w3-top,
.w3-bottom {
  position: fixed;
  width: 100%;
  z-index: 1
}

.w3-top {
  top: 0
}

.w3-bottom {
  bottom: 0
}

.w3-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2
}

.w3-display-topleft {
  position: absolute;
  left: 0;
  top: 0
}

.w3-display-topright {
  position: absolute;
  right: 0;
  top: 0
}

.w3-display-bottomleft {
  position: absolute;
  left: 0;
  bottom: 0
}

.w3-display-bottomright {
  position: absolute;
  right: 0;
  bottom: 0
}

.w3-display-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
  padding: 0 8px
}

.w3-container,
.w3-panel {
  padding: 0.01em 16px
}

@keyframes w3-spin {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(359deg)
  }
}

@keyframes fading {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

.w3-animate-opacity {
  animation: opac 0.8s
}

.w3-animate-input {
  transition: width 0.4s ease-in-out
}

.w3-animate-input:focus {
  width: 100%!important
}

.w3-opacity,
.w3-hover-opacity:hover {
  opacity: 0.60
}

.w3-opacity-off,
.w3-hover-opacity-off:hover {
  opacity: 1
}

.w3-opacity-max {
  opacity: 0.25
}

.w3-opacity-min {
  opacity: 0.75
}

.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
  filter: grayscale(100%)
}

.w3-greyscale,
.w3-grayscale {
  filter: grayscale(75%)
}

.w3-greyscale-min,
.w3-grayscale-min {
  filter: grayscale(50%)
}

.w3-sepia {
  filter: sepia(75%)
}

.w3-sepia-max,
.w3-hover-sepia:hover {
  filter: sepia(100%)
}

.w3-sepia-min {
  filter: sepia(50%)
}

.w3-tiny {
  font-size: 10px!important
}

.w3-small {
  font-size: 12px!important
}

.w3-medium {
  font-size: 15px!important
}

.w3-large {
  font-size: 18px!important
}

.w3-xlarge {
  font-size: 24px!important
}

.w3-xxlarge {
  font-size: 36px!important
}

.w3-xxxlarge {
  font-size: 48px!important
}

.w3-jumbo {
  font-size: 64px!important
}

.w3-left-align {
  text-align: left!important
}

.w3-right-align {
  text-align: right!important
}

.w3-justify {
  text-align: justify!important
}

.w3-center {
  text-align: center!important
}

.w3-border-0 {
  border: 0!important
}

.w3-border {
  border: 1px solid #ccc!important
}

.w3-border-top {
  border-top: 1px solid #ccc!important
}

.w3-border-bottom {
  border-bottom: 1px solid #ccc!important
}

.w3-border-left {
  border-left: 1px solid #ccc!important
}

.w3-border-right {
  border-right: 1px solid #ccc!important
}

.w3-topbar {
  border-top: 6px solid #ccc!important
}

.w3-bottombar {
  border-bottom: 6px solid #ccc!important
}

.w3-leftbar {
  border-left: 6px solid #ccc!important
}

.w3-rightbar {
  border-right: 6px solid #ccc!important
}

.w3-section,
.w3-code {
  margin-top: 16px!important;
  margin-bottom: 16px!important
}

.w3-margin {
  margin: 16px!important
}

.w3-margin-top {
  margin-top: 16px!important
}

.w3-margin-bottom {
  margin-bottom: 16px!important
}

.w3-margin-left {
  margin-left: 16px!important
}

.w3-margin-right {
  margin-right: 16px!important
}

.w3-padding-small {
  padding: 4px 8px!important
}

.w3-padding {
  padding: 8px 16px!important
}

.w3-padding-large {
  padding: 12px 24px!important
}

.w3-padding-16 {
  padding-top: 16px!important;
  padding-bottom: 16px!important
}

.w3-padding-24 {
  padding-top: 24px!important;
  padding-bottom: 24px!important
}

.w3-padding-32 {
  padding-top: 32px!important;
  padding-bottom: 32px!important
}

.w3-padding-48 {
  padding-top: 48px!important;
  padding-bottom: 48px!important
}

.w3-padding-64 {
  padding-top: 64px!important;
  padding-bottom: 64px!important
}

.w3-left {
  float: left!important
}

.w3-right {
  float: right!important
}

.w3-button:hover {
  color: #000!important;
  background-color: #ccc!important
}

.w3-transparent,
.w3-hover-none:hover {
  background-color: transparent!important
}

.w3-hover-none:hover {
  box-shadow: none!important
}


/* Colors */

.w3-amber,
.w3-hover-amber:hover {
  color: #000!important;
  background-color: #ffc107!important
}

.w3-aqua,
.w3-hover-aqua:hover {
  color: #000!important;
  background-color: #00ffff!important
}

.w3-blue,
.w3-hover-blue:hover {
  color: #fff!important;
  background-color: #2196F3!important
}

.w3-light-blue,
.w3-hover-light-blue:hover {
  color: #000!important;
  background-color: #87CEEB!important
}

.w3-brown,
.w3-hover-brown:hover {
  color: #fff!important;
  background-color: #795548!important
}

.w3-cyan,
.w3-hover-cyan:hover {
  color: #000!important;
  background-color: #00bcd4!important
}

.w3-blue-grey,
.w3-hover-blue-grey:hover,
.w3-blue-gray,
.w3-hover-blue-gray:hover {
  color: #fff!important;
  background-color: #607d8b!important
}

.w3-green,
.w3-hover-green:hover {
  color: #fff!important;
  background-color: #4CAF50!important
}

.w3-light-green,
.w3-hover-light-green:hover {
  color: #000!important;
  background-color: #8bc34a!important
}

.w3-indigo,
.w3-hover-indigo:hover {
  color: #fff!important;
  background-color: #3f51b5!important
}

.w3-khaki,
.w3-hover-khaki:hover {
  color: #000!important;
  background-color: #f0e68c!important
}

.w3-lime,
.w3-hover-lime:hover {
  color: #000!important;
  background-color: #cddc39!important
}

.w3-orange,
.w3-hover-orange:hover {
  color: #000!important;
  background-color: #ff9800!important
}

.w3-deep-orange,
.w3-hover-deep-orange:hover {
  color: #fff!important;
  background-color: #ff5722!important
}

.w3-pink,
.w3-hover-pink:hover {
  color: #fff!important;
  background-color: #e91e63!important
}

.w3-purple,
.w3-hover-purple:hover {
  color: #fff!important;
  background-color: #9c27b0!important
}

.w3-deep-purple,
.w3-hover-deep-purple:hover {
  color: #fff!important;
  background-color: #673ab7!important
}

.w3-red,
.w3-hover-red:hover {
  color: #fff!important;
  background-color: #f44336!important
}

.w3-sand,
.w3-hover-sand:hover {
  color: #000!important;
  background-color: #fdf5e6!important
}

.w3-teal,
.w3-hover-teal:hover {
  color: #fff!important;
  background-color: #009688!important
}

.w3-yellow,
.w3-hover-yellow:hover {
  color: #000!important;
  background-color: #ffeb3b!important
}

.w3-white,
.w3-hover-white:hover {
  color: #000!important;
  background-color: #fff!important
}

.w3-black,
.w3-hover-black:hover {
  color: #fff!important;
  background-color: #000!important
}

.w3-red,
.w3-hover-black:hover {
  color: red!important;
  background-color: #000!important
}

.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
  color: #000!important;
  background-color: #bbb!important
}

.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
  color: #000!important;
  background-color: #f1f1f1!important;
}

.w3-dark-grey,
.w3-hover-dark-grey:hover,
.w3-dark-gray,
.w3-hover-dark-gray:hover {
  color: #fff!important;
  background-color: #616161!important
}

.w3-pale-red,
.w3-hover-pale-red:hover {
  color: #000!important;
  background-color: #ffdddd!important
}

.w3-pale-green,
.w3-hover-pale-green:hover {
  color: #000!important;
  background-color: #ddffdd!important
}

.w3-pale-yellow,
.w3-hover-pale-yellow:hover {
  color: #000!important;
  background-color: #ffffcc!important
}

.w3-pale-blue,
.w3-hover-pale-blue:hover {
  color: #000!important;
  background-color: #ddffff!important
}

.w3-text-red,
.w3-hover-text-red:hover {
  color: #f44336!important
}

.w3-text-green,
.w3-hover-text-green:hover {
  color: #4CAF50!important
}

.w3-text-blue,
.w3-hover-text-blue:hover {
  color: #2196F3!important
}

.w3-text-yellow,
.w3-hover-text-yellow:hover {
  color: #ffeb3b!important
}

.w3-text-white,
.w3-hover-text-white:hover {
  color: #fff!important
}

.w3-text-op,
.w3-hover-text-op:hover {
  color: #a1a1a1!important
}

.w3-text-black,
.w3-hover-text-black:hover {
  color: #000!important
}

.w3-text-grey,
.w3-hover-text-grey:hover,
.w3-text-gray,
.w3-hover-text-gray:hover {
  color: #757575!important
}

.w3-text-amber {
  color: #ffc107!important
}

.w3-text-aqua {
  color: #00ffff!important
}

.w3-text-light-blue {
  color: #87CEEB!important
}

.w3-text-brown {
  color: #795548!important
}

.w3-text-cyan {
  color: #00bcd4!important
}

.w3-text-blue-grey,
.w3-text-blue-gray {
  color: #607d8b!important
}

.w3-text-light-green {
  color: #8bc34a!important
}

.w3-text-indigo {
  color: #3f51b5!important
}

.w3-text-khaki {
  color: #b4aa50!important
}

.w3-text-lime {
  color: #cddc39!important
}

.w3-text-orange {
  color: #ff9800!important
}

.w3-text-deep-orange {
  color: #ff5722!important
}

.w3-text-pink {
  color: #e91e63!important
}

.w3-text-purple {
  color: #9c27b0!important
}

.w3-text-deep-purple {
  color: #673ab7!important
}

.w3-text-sand {
  color: #fdf5e6!important
}

.w3-text-teal {
  color: #009688!important
}

.w3-text-light-grey,
.w3-hover-text-light-grey:hover,
.w3-text-light-gray,
.w3-hover-text-light-gray:hover {
  color: #f1f1f1!important
}

.w3-border-grey,
.w3-hover-border-grey:hover,
.w3-border-gray,
.w3-hover-border-gray:hover {
  border-color: #bbb!important
}

<div class="w3-container w3-padding-32" id="People">
  <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Interesting People Every Web Designer Should Know</h3>
</div>

<div class="w3-row-padding w3-grayscale">
  <div class="w3-col l3 m6 w3-margin-bottom">
    <img src="ppl1.jpg" alt="Ethan" style="width:100%">
    <h3>Ethan Marcotte</h3>
    <p class="w3-opacity">Founder of Responsive Web Design</p>
    <p class="ppl-font">
      If there's one man in the web industry who probably doesn't need an introduction, it's </br>Ethan Marcotte.</br>
      One of the web's best-known designers. </br>Ethan is a regular and popular speaker on the conference circuit and, in his own words, the one who "started that whole 'responsive web design' thing".
      <form>
        <input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://ethanmarcotte.com/')" />
      </form>
    </p>
  </div>
  <div class="w3-col l3 m6 w3-margin-bottom">
    <img src="ppl2.jpg" alt="Chris" style="width:100%">
    <h3>Chris Coyier</h3>
    <p class="w3-opacity">Founder / Writer / Designer</p>
    <p class="ppl-font">A world-known CSS expert and HTML guru, Chris Coyier writes one of the most popular CSS blogs on the web, CSS-Tricks. Throughout his career, Chris has published many tutorials, websites, and scripts to help designers improve their skills. A designer
      at CodePen, Chris can also be found at web design and development podcast ShopTalk.
      <form>
        <input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://chriscoyier.net/')" />
      </form>
    </p>
  </div>
  <div class="w3-col l3 m6 w3-margin-bottom">
    <img src="ppl3.jpg" alt="Karen" style="width:100%">
    <h3>Karen McGrane</h3>
    <p class="w3-opacity">UX and content strategy for web and mobile</p>
    <p class="ppl-font">
      UX expert Karen McGrane motto is simple - 'On a good day, I make the web more awesome. A content strategist and user experience designer, Karen has over 15 years experience of making big, complicated websites. Currently managing partner of Bond Art +
      Science, she is also the author of Content Strategy for Mobile.
      <form>
        <input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://karenmcgrane.com/')" />
      </form>
    </p>
  </div>
  <div class="w3-col l3 m6 w3-margin-bottom">
    <img src="ppl4.jpg" alt="Andy" style="width:100%">
    <h3>Andy Clarke</h3>
    <p class="w3-opacity">Founder of a Welsh-based design studio</p>
    <p class="ppl-font">Andy is a well-known speaker on the conference circuit, and is the founder of a Welsh-based design studio, Stuff and Nonsense, that boasts clients including the likes of The Home Office, STV and the International Organization for Standardization.
      Andy is perhaps best known for his book, Hardboiled Web Design, which combined the idea of progressive enhancement with responsive web design.
      <form>
        <input class="w3-button w3-light-grey w3-block div-size4" type="button" value="Click" onclick="window.open('https://stuffandnonsense.co.uk/')" />
      </form>
    </p>
  </div>
</div>

Answer 1

同行元素

设置显示在图片下方的文本的高度应该为放置按钮提供一个合适的高度:

滚动 y 溢出的示例:

* {
  box-sizing: border-box;
}

.Card {
  display: inline-block;
  width: 200px;
  height: 400px;
  box-shadow: 1px 1px 2px black;
  margin: 0.5em;
}
.Card img {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.Card h1 {
  margin: 0;
}
/*Magic starts here*/
.Card p {
  display: block;
  height: 100px;
  overflow-y: auto;
}
.Card button {
  display: block;
  height: 2em;
  width: 100%;
  border: none;
  background-color: cornflowerblue;
  box-shadow: 1px 1px 1px black;
}

<div class="Card">
  <img src="http://lorempixel.com/150/150"/>
  <h1>Name</h1>
  <p>Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here,</p>
  <button>Press me!</button>
</div>
<div class="Card">
  <img src="http://lorempixel.com/150/150"/>
  <h1>Nameru</h1>
  <p>Text goes here</p>
  <button>Press me!</button>
</div>
<div class="Card">
  <img src="http://lorempixel.com/150/150"/>
  <h1>Nameru</h1>
  <p>Text goes here</p>
  <button>Press me!</button>
</div>
<div class="Card">
  <img src="http://lorempixel.com/150/150"/>
  <h1>Nameru</h1>
  <p>Text goes here</p>
  <button>Press me!</button>
</div>