html - 调整大小时如何使按钮在表格中保持对齐

Question

我有一张 table ，里面有按钮。它看起来不错，但是当我调整浏览器以调整某些内容的大小时，会导致按钮无法正确排列。对此的任何想法都会很棒。表格需要看起来像它的样子，在外面以及每行和每列之间有粗边框。这可能是一个简单的修复，但出于某种原因，它让我很困惑。我试过使用 bootstrap 并将每个都放入它自己的行中。

table {
  border-collapse: separate;
  border-spacing: 15px 15px;
}
td {
  background-color:white;
  text-align:center;
}
img {
  margin:0px auto;
  display:block
}
p {
  padding-top:5px;
}s
h3 {
  margin-top:10px;
  letter-spacing:2px;
  font-weight: lighter;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12">
      <h1>Finding an Internship</h1>
      <hr />
    </div>
    <div class="col-xs-12 col-sm-12">
      <p style="color:#036CB6; font-size:18px;">Students are responsible for finding their own internships but there are many resources available.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-12">
      <div class="table-responsive" style="background-color: #F1F2F2">
        <table class="table">
          <tr>
            <td>
              <img src="Images/advising/internships/InternshipCoordinators.png"" class="img-responsive" alt="Internship Coordinators">
              <h3>Internship<br/>Coordinators</h3>
              <p>Visit with your Department<br/>Internship Coordinator to ensure<br/>you understand all your<br/>department's guidelines.</p>
              <a style="background-color:#0668B3;" href="x116191.xml" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
            <td>
              <img src="Images/advising/internships/ResumeAndCoverLetterReviews.png" class="img-responsive" alt="Resume and CoverLetter Reviews">
              <h3>RESUME AND COVER<br/>LETTER REVIEWS</h3>
              <p>Have your resume and cover letter<br/>reviewed by meeting with atrained<br/>peer mentor.<br/><br/></p>
              <a style="background-color:#0668B3;" href="http://www.byui.edu/iplan/beta/tutorials/advising-schedule-an-appointment" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
            <td>
              <img src="Images/advising/internships/InternshipApprovalProcess.png" class="img-responsive" alt="Internship Approval Process">
              <h3>INTERNSHIP<br />APPROVAL PROCESS</h3>
              <p>Once you have found an internship,<br />follow the internship approval<br /> process.<br/><br/></p>
              <a style="background-color:#0668B3;" href="x116857.xml" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
          </tr>
          <tr>
            <td>
              <img src="Images/advising/internships/CareerNavigator.png" class="img-responsive" alt="Career Navigator">
              <h3>CAREER NAVIGATOR</h3>
              <p><br/>Read past issues of Perspective,<br/>watch instructional videos, find past<br/>workshops and more.<br/><br/></p>
              <a style="background-color:#0668B3;" href="https://byui-csm.symplicity.com/" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
            <td>
              <img src="Images/advising/internships/AlumniOffice.png" class="img-responsive" alt="Alumni Office">
              <h3>ALUMNI OFFICE</h3>
              <p><br/>Apply to travel to a conference,<br/>come get a lunch at a Brown Bag<br/>Discussion, attend workshops and<br/>more.</p>
              <a style="background-color:#0668B3;" href="http://www.byui.edu/alumni" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
            <td>
              <img src="Images/advising/internships/Linkedin.png" class="img-responsive" alt="Linkedin">
              <h3>LINKEDIN</h3>
              <p><br/>Get the latest information and read<br/>faculty news articles in our<br/>Instructional Development<br/>newsroom.</p>
              <a style="background-color:#0668B3;" href="https://www.linkedin.com/" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
          </tr>
          <tr>
            <td>
              <img src="Images/advising/internships/cnc.png" class="img-responsive" alt="Career Networking Center">
              <h3>CAREER NETORKING<br/>CENTER</h3>
              <p>Offers the networking crash course,<br/>walk-in resume help, and general<br/>career planning.<br/><br/></p>
              <a style="background-color:#0668B3;" href="x116064.xml" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
            <td>
              <img src="Images/advising/internships/InternshipServiceMissionaries.png" class="img-responsive" alt="InternshipServiceMissionaries">      
              <h3>INTERNSHIP SERVICE<br/>MISSIONARIES</h3>
              <p>Visit with your Department<br/>Internship Service Missionaries to<br/>seek out opportunites.<br/><br/></p>
              <a style="background-color:#0668B3;" href="x116158.xml" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
            <td>      
              <img src="Images/advising/internships/11-15BYUIInternships.png" class="img-responsive" alt="11-15 BYUI Internships">
              <h3>BYU-IDAHO<br/>INTERNSHIPS: 2011-2015</h3>
              <p>Search past internships completed<br/>by BYU-Idaho students for ideas of<br/>companies.<br/><br/></p>
              <a style="background-color:#0668B3;" href="http://www.byui.edu/Documents/advising/internships/BYUI%20INTERNSHIPS%202011%20-%202015(1).xlsx" class="btn btn-primary" role="button">LEARN MORE</a>
            </td>
          </tr>
        </table>
      </b>
    </div>
  </div>
</div>

Answer 1

为了确保 button 保持一致，您必须将 h3 和 p 元素包装在一个具有固定高度的容器中，这样当您调整浏览器大小时，高度保持不变。

HTML

<td>
  <img>
  <div class="fixed-height">
    <h3>title</h3>
    <p>content</p>
   </div>
   <a>button</a>
</td>

CSS

.fixed-height {
   height: 300px;
}