我有一张桌子，里面有按钮。它看起来很棒，但是当我调整浏览器以调整某些内容移动时，导致按钮无法正确排列。对此的任何想法都会很棒。该表需要按照它的方式进行查看，外部和每个行和列之间有粗边框。这可能是一个简单的修复，但由于某种原因，它是在困扰我。我尝试过使用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>
答案 0 :(得分：0)
为确保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;
}
答案 1 :(得分：0)
你走了:)）
table {
border-collapse: separate;
border-spacing: 15px 15px;
}
td {
background-color:white;
text-align:center;
position: relative;
}
td a {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
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>