我的网站上有一系列滚动链接，我试图让它们保持相同的高度，因此当一个人现在必须使用两行时，其他人会改变高度以保持一致。我在这里遇到了几个解决方案，我将在一秒钟内完成。首先让我告诉你代码。
body {
background-color: #000;
}
.full_section {
width: 100%;
height: auto;
}
.Pro_Qual_s_link_frame {
margin: 7em 0 11em 0;
padding: 2em 0 2em 0;
display: block;
}
.quarter_section {
width: 25%;
height: auto;
}
.Pro_Qual_s_link_container {
float: left;
padding: 2em 0 2em 0;
display: block;
}
.Pro_Qual_s_link {
width: 77%;
margin: auto;
padding: 2em 0 2em 0;
border-radius: 0.44em;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
.color_style_b_1 {
border-style: ridge;
border-color: #888;
border-width: .11em;
color: #e0e0e0;
background-color: rgba(150, 150, 150, 0.11);
box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}
.color_style_g_1 {
border-style: ridge;
border-color: #55ED2B;
border-width: .11em;
color: #B5FFB8;
background-color: rgba(10, 61, 12, 0.11);
box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}
.color_style_k_1 {
border-style: ridge;
border-width: .11em;
border-color: #DB3016;
color: #FFAF69;
background-color: rgba(102, 0, 0, 0.11);
text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
box-shadow: 0 0 3em rgba(214, 73, 34, 0.44);
}
.color_style_j_1 {
border-style: ridge;
border-width: .11em;
border-color: #633191;
color: #CD9AFC;
background-color: rgba(67, 3, 150, 0.11);
text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}<div id="Personal_Strengths_link_frame" class="full_section Pro_Qual_s_link_frame">
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_k_1" href="#html">
Back To Top
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_b_1" href="#Specialty_Practices_frame">
Specialty Practices
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_g_1" href="#Industries_Served_frame">
Industries I've Served
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_j_1" href="#Tools_of_Choice_frame">
My Tools Of Choice
</a>
</div>
</div>
的jsfiddle https://jsfiddle.net/Optiq/2xcuq6rs/3/
好的，我找到的第一个解决方案是将包含元素的显示更改为表，将其中的元素更改为table-cell。在我的实例中，我更改了.Pro_Qual_s_link_frame以显示table和.Pro_Qual_s_link以显示table-cell
我这样做是因为.Pro_Qual_s_link_container作为框架的一部分存在，以保持响应性地响应所有内容。这不起作用，它也使链接与Pro_Qual_s_link_container元素一样大。我尝试使用高度和宽度来看看我是否可以让它工作，没有任何事情发生。
接下来我在这里找到了一个建议使用flex的解决方案。我这样设置了
.Pro_Qual_s_link_frame{
margin: 7em 0 11em 0;
padding: 2em 0 2em 0;
display: flex;
}
.Pro_Qual_s_link{
width: 77%;
margin:auto;
padding: 2em 0 2em 0;
border-radius: 0.44em;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
flex: 1;
}
这不仅不起作用，而且似乎已经取消了宽度和填充。当我缩小尺寸时，我会在每个元素上弹出2个额外的框，就像它为第二行文本创建一个新框。我使用各种不同的设置玩了很多，比如从百分比切换到em，但它仍然没有影响它。
我玩了3个元素的显示设置，看看我是否可以想出两个解决方案的组合，但没有任何结果。我做错了什么或错过了某个地方的一步吗？或者我的特定实例需要不同的解决方案吗？
答案 0 :(得分：3)
你的解决方案有一些奇怪的边缘等，这使得它不适用于flex。这是一个使用flex的工作示例。
body {
background-color: #000;
}
* {
box-sizing: border-box;
}
.full_section {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Pro_Qual_s_link_frame {
margin: 7em 0 11em 0;
padding: 2em 0 2em 0;
}
.quarter_section {
width: 25%;
height: auto;
flex: 1;
}
.Pro_Qual_s_link_container {
width: 25%;
padding: 2em 0 2em 0;
display: block;
}
.Pro_Qual_s_link {
width: 77%;
height: 100%;
margin: auto;
padding: 2em 0 2em 0;
border-radius: 0.44em;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}
.color_style_b_1 {
border-style: ridge;
border-color: #888;
border-width: .11em;
color: #e0e0e0;
background-color: rgba(150, 150, 150, 0.11);
box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}
.color_style_g_1 {
border-style: ridge;
border-color: #55ED2B;
border-width: .11em;
color: #B5FFB8;
background-color: rgba(10, 61, 12, 0.11);
box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}
.color_style_k_1 {
border-style: ridge;
border-width: .11em;
border-color: #DB3016;
color: #FFAF69;
background-color: rgba(102, 0, 0, 0.11);
text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
box-shadow: 0 0 3em rgba(214, 73, 34, 0.44);
}
.color_style_j_1 {
border-style: ridge;
border-width: .11em;
border-color: #633191;
color: #CD9AFC;
background-color: rgba(67, 3, 150, 0.11);
text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}<div id="Personal_Strengths_link_frame" class="full_section Pro_Qual_s_link_frame">
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_k_1" href="#html">
Back To Top
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_b_1" href="#Specialty_Practices_frame">
Specialty Practices
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_g_1" href="#Industries_Served_frame">
Industries I've Served
</a>
</div>
<div class="quarter_section Pro_Qual_s_link_container">
<a class="Pro_Qual_s_link color_style_j_1" href="#Tools_of_Choice_frame">
My Tools Of Choice
</a>
</div>
</div>
这是一个JSFiddle：https://jsfiddle.net/thepio/dh0jbwou/
答案 1 :(得分：1)
使用display-table而不是flexbox的解决方案（flexbox很棒但是如果你需要IE兼容性，你就不能使用它）：
<强> HTML
<div id="Personal_Strengths_link_frame" class="full_section Pro_Qual_s_link_frame">
<div class="Pro_Qual_s_link_container color_style_k_1">
<a class="Pro_Qual_s_link" href="#html">
Back To Top
</a>
</div>
<div class="Pro_Qual_s_link_container color_style_b_1">
<a class="Pro_Qual_s_link" href="#Specialty_Practices_frame">
Specialty Practices
</a>
</div>
<div class="Pro_Qual_s_link_container color_style_g_1">
<a class="Pro_Qual_s_link" href="#Industries_Served_frame">
Industries I've Served
</a>
</div>
<div class="Pro_Qual_s_link_container color_style_j_1">
<a class="Pro_Qual_s_link" href="#Tools_of_Choice_frame">
My Tools Of Choice
</a>
</div>
</div>
<强> CSS
body{
background-color: #000;
}
.full_section {
width: 100%;
height: auto;
}
.Pro_Qual_s_link_frame {
margin: 7em 0 11em 0;
padding: 1em 0 1em 0;
display: table;
border-spacing: 30px;
}
.Pro_Qual_s_link_container {
border-radius: 0.44em;
border-style: ridge;
border-width: .11em;
display: table-cell;
padding: 2em 0 2em 0;
width: 25%;
}
.Pro_Qual_s_link {
display: block;
color: inherit;
font-family: 'Roboto', sans-serif;
margin:auto;
padding: 2em 0 2em 0;
text-align: center;
text-decoration: none;
}
.color_style_b_1 {
border-color: #888;
color: #e0e0e0;
background-color: rgba(150, 150, 150, 0.11);
box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}
.color_style_g_1 {
border-color: #55ED2B;
color: #B5FFB8;
background-color: rgba(10, 61, 12, 0.11);
box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}
.color_style_k_1 {
border-color: #DB3016;
color: #FFAF69;
background-color: rgba(102, 0, 0, 0.11);
text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
box-shadow: 0 0 3em rgba(214, 73, 34, 0.44);
}
.color_style_j_1 {
border-color: #633191;
color: #CD9AFC;
background-color: rgba(67, 3, 150, 0.11);
text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}
<强> Working Fiddle