如何让我的div彼此保持一致的身高？

debugcn 发表于 Dev

Optiq

我在我的网站上有一系列滚动链接，并且正在尝试使它们以响应方式保持相同的高度，因此当其中一个现在必须使用两行时，其他行会更改高度以保持一致。我在这里遇到了几个解决方案，我将在几秒钟内深入探讨。首先，让我向您展示代码。

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，并将其中的元素更改为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;
}

这不仅无效，而且似乎取消了宽度和填充。当我缩小尺寸时，我看到每个元素上都弹出了两个额外的框，就像它为第二行文本创建了一个新框一样。我在各种不同的设置下玩的更多，例如从百分比切换到em，但仍然没有影响。

我尝试了3个元素上的显示设置，以查看是否可以提出两种可行的解决方案的组合，但没有发现任何问题。我做错了什么还是错过了某个地方的步骤？还是我的特定实例需要其他解决方案？

埃里亚

使用显示表而不是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);
}

工作小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-1

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章