相同的线元素

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溢出的示例：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我建议阅读有关如何使用flexbox，或者使用表格或display:table的信息。每个都可以强制您的列高度相同，然后您可以将按钮放在每个列的底部。

[编辑] 这是一个JSFiddle，它展示了如何使用它将按钮粉碎到底部： https://jsfiddle.net/hsnohum5/1/

Answer 3

尝试将此代码添加到CSS中。我希望它能奏效。

.w3-row-padding {
  display: flex;
}

form {
  position: absolute;
  bottom: 0;
}
.w3-row-padding >div {
  position: relative;
}

.w3-row-padding >div>p {
  margin-bottom: 50px;
}

Answer 4

如果不重做整件事，我可以提出所谓的padding trick。我们的想法是将容器的高度设置为0px，并使填充看起来好像是高度。也为此外部容器设置relative位置。同时在其中放置另一个容器并将其位置设置为absolute并拉伸它以占据外部容器内的所有空间。在您的代码中，我在<div>内添加了.w3-col并将所有内容放在那里。我设置了以下其他样式：

 .w3-col form {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
 }
 .w3-btn, .w3-button {
    width: 90%;
 }
 .w3-col {
    padding-bottom: 80%!important;
    position: relative;
    height: 0px;
 }
.w3-col > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

如果你的积木是静态的 - 似乎就是这种情况 - 你只需要为padding-bottom正确设置.w3-col以适应所有内容。整件事（你可能希望抛光不同视口的响应性）：

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;
  width: 90%;
}
.w3-col form {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
}
.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 {
    padding-bottom: 80%!important;
    position: relative;
    height: 0px;
}
.w3-col > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.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">
  <div>
    <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".</p>
      <form>
        <input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://ethanmarcotte.com/')" />
      </form>
     </div>
  </div>
  <div class="w3-col l3 m6 w3-margin-bottom"><div>
    <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.</p> 
      <form>
        <input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://chriscoyier.net/')" />
      </form>
     </div>
  </div>
  <div class="w3-col l3 m6 w3-margin-bottom"><div>
    <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.</p> 
      <form>
        <input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://karenmcgrane.com/')" />
      </form>
     </div>
  </div>
  <div class="w3-col l3 m6 w3-margin-bottom"><div>
    <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.</p>
      <form>
        <input class="w3-button w3-light-grey w3-block div-size4" type="button" value="Click" onclick="window.open('https://stuffandnonsense.co.uk/')" />
      </form>
      </div>
  </div>
</div>

无论div是多大，都在一行显示按钮

4 个答案:

相同的线元素