<div> 的链接问题封装在标签 <a> 内，有 2 列

【问题标题】：link problem with <div> encapsulated inside tag <a> with 2 columns<div> 的链接问题封装在标签 <a> 内，有 2 列
【发布时间】：2021-02-12 16:50:02
【问题描述】：

当我使用全局标记&lt;a&gt; 编写此代码时，链接 id 已定义并出现在鼠标所在的任何位置的底部。

        <a class="link" href="opencl/toto.htm">
          <div class="enve d-flex">
            <div class="picture">
              <figure class="figure" style="background-image: url('images/desert.jpg');">
              </figure>
            </div>
            <div class="description">
              <span class="keywords">keyword1 - keyword2</span>
              <h6 class="title">
                ************************** Title 1
              </h6>
              <div class="stats">
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M17 4h3v16h-3zM5 14h3v6H5zm6-5h3v11h-3z"
                      ></path>
                      <title>Difficulté</title>
                    </svg>
                    <span class="stat-text">
                      <span>Facile</span>
                    </span>
                  </span>
                </span>
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                      ></path>
                      <path
                        d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
                      ></path>
                      <title>Durée</title>
                    </svg>
                    <span class="stat-text">
                      <span>20 heures</span>
                    </span>
                  </span>
                </span>                  
              </div>
              <div class="explication">
                Explanation about that
              </div>
            </div>
          </div>
        </a>

结果正常：

但是现在，我想要一个包含所有 div 图片的图片链接，以及另一个涵盖第二列（描述）的链接，但似乎容器（flexbox、bootstrap）和我没有解决这个问题的解决方案（当鼠标悬停在图片或第二列时，两个链接都必须出现在页面底部（就像 href 一样））.. 可以这样做吗？

代码与结果不符：

          <div class="enve d-flex">
            <a class="link" href="opencl/toto.htm">
            <div class="picture">
              <figure class="figure" style="background-image: url('images/desert.jpg');">
              </figure>
            </div>
            </a>
            <a class="link" href="opencl/titi.htm">
            <div class="description">
              <span class="keywords">keyword1 - keyword2</span>
              <h6 class="title">
                ************************** Title 1
              </h6>
              <div class="stats">
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M17 4h3v16h-3zM5 14h3v6H5zm6-5h3v11h-3z"
                      ></path>
                      <title>Difficulté</title>
                    </svg>
                    <span class="stat-text">
                      <span>Facile</span>
                    </span>
                  </span>
                </span>
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                      ></path>
                      <path
                        d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
                      ></path>
                      <title>Durée</title>
                    </svg>
                    <span class="stat-text">
                      <span>20 heures</span>
                    </span>
                  </span>
                </span>                  
              </div>
              <div class="explication">
                Explanation about that
              </div>
            </div>
           </a>
          </div>

两个链接的结果都不好：

CSS 代码（实际上是 scss）

.picture{
  background-color: rgb(0, 131, 143);
  flex-shrink: 0;
  align-self: flex-start;
  width: 40%;
  position: relative;
  max-width: 270px;
  .figure{
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    padding: 0;
    padding-bottom: 56.25%;
    background-size: cover;
    //background-color: #e0e0e0;
    background-position: center;
  }
}
.enve{
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
  padding: 16px;
  margin-bottom: 16px;
}
.enve:hover{
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.description{
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 0 0 0 16px;
  width: 100%;
  .title{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.625rem;
  }
 
}
.link{
  color:inherit;
  text-decoration: none;
  display: block;
  &:hover{
    color:inherit;
    text-decoration: none;
  }
}

.stats{
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.625rem;
  margin-bottom: 8px;
  .pstat{
    margin: 0;
    margin-right: 24px;
    .stats-icon{
      font-size: 1.5rem;
      width: 18px;
      height: 18px;
      margin-right: 8px;
      margin-bottom: 3px;
      vertical-align: middle;
    }
  }
}

当我清除类 d-flex 时，结果还可以，但当然必须用行替换列……我想要列……

【问题讨论】：

  • 请同时添加相应的css。似乎是样式问题。
  • @MincedMeatMole 我已经添加了css代码

标签： html jquery bootstrap-4 sass flexbox


【解决方案1】：

给你：

发生的情况如下：当您没有为元素定义最小宽度时，display flex 会尝试根据需要在 div 中分配空间。由于 a-tag 是内联块，它们会自动折叠到 0 的宽度；作为背景图像也不会增加左侧图像折叠的宽度。

例如，向 .picture 类添加最小宽度可以解决此问题（百分比宽度在这里也不起作用）。

为了在一行而不是一列中显示项目，我只是在 .enve 容器中添加了 flex-direction: row （也是 display-flex，因为 d-flex 类没有为我这样做）。

希望对你有所帮助^^

要更深入地了解 flexbox，我建议您阅读以下内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.picture{
  background-color: rgb(0, 131, 143);
  //flex-shrink: 0;
  align-self: flex-start;
  width: 40%;
  position: relative;
  max-width: 270px;
  min-width: 270px;
  }
  .picture .figure{
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    padding: 0;
    padding-bottom: 56.25%;
    background-size: cover;
    //background-color: #e0e0e0;
    background-position: center;
  }
.enve{
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
}
.enve:hover{
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.description{
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 0 0 0 16px;
  width: 100%;
}
.description .title{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.625rem;
  }
.link{
  color:inherit;
  text-decoration: none;
  display: block;
  &:hover{
    color:inherit;
    text-decoration: none;
  }
}

.stats{
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.625rem;
  margin-bottom: 8px;
}
.stats .pstat{
    margin: 0;
    margin-right: 24px;
  }
  .stats .pstat .stats-icon{
      font-size: 1.5rem;
      width: 18px;
      height: 18px;
      margin-right: 8px;
      margin-bottom: 3px;
      vertical-align: middle;
    }
<div class="enve">
            <a class="link" href="opencl/toto.htm">
            <div class="picture">
              <figure class="figure" style="background-image: url('images/desert.jpg');">
              </figure>
            </div>
            </a>
            <a class="link" href="opencl/titi.htm">
            <div class="description">
              <span class="keywords">keyword1 - keyword2</span>
              <h6 class="title">
                ************************** Title 1
              </h6>
              <div class="stats">
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M17 4h3v16h-3zM5 14h3v6H5zm6-5h3v11h-3z"
                      ></path>
                      <title>Difficulté</title>
                    </svg>
                    <span class="stat-text">
                      <span>Facile</span>
                    </span>
                  </span>
                </span>
                <span>
                  <span class="pstat">
                    <svg class="stats-icon" viewBox="0 0 24 24">
                      <path
                        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                      ></path>
                      <path
                        d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
                      ></path>
                      <title>Durée</title>
                    </svg>
                    <span class="stat-text">
                      <span>20 heures</span>
                    </span>
                  </span>
                </span>                  
              </div>
              <div class="explication">
                Explanation about that
              </div>
            </div>
           </a>
          </div>

【讨论】：

  • 是的，图片的最小宽度就可以了……非常感谢您的帮助……！！
【解决方案2】：

这可能是 CSS 问题，您确定您的第一个链接的大小为 50% 吗？

<a class="link" href="opencl/toto.htm">  <!-- This a should have a 50% width and display block -->
    <div class="picture"> <!-- This div should have a 100% width -->
        <figure class="figure" style="background-image: url('images/desert.jpg');">  <!-- This figure should have a 100% width -->
        </figure>
    </div>
</a>

另外，如果这不能解决您的问题，请记住您可以使用

onclick="window.location.href='myLink'"

【讨论】：

  • 感谢您的回答，我已经添加了 css 代码..我没有看到错误..也许我忘记了一些东西...对于 jqyuery，是的，我知道，但我需要链接显示，我认为 window.location 不显示它
  • 您的标签 没有 40% 的宽度，因此默认为 0。只需在此标签中添加一个类和宽度，就可以了： )
  • 不，它不好，我看不到变化......但我已经完成了我的问题......当我清除类 flexbox d-flex 我有两个链接但有 2 行而不是列（清除d-flex时正常）
【解决方案3】：

您可以通过 onclick() 事件尝试此操作

<div onclick="window.location.href='https://google.com'">somediv</div>

不幸的是，链接没有出现在页面底部。我认为只有使用 href 才能做到这一点。

【讨论】：

  • 感谢您的回复，是的，我知道这个技巧，但我需要显示链接..
猜你喜欢
  • 2012-03-14
  • 1970-01-01
  • 1970-01-01
  • 2013-05-11
  • 2021-11-22
  • 1970-01-01
  • 1970-01-01
  • 2015-02-23
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode