用链接覆盖div

Question

我有一排div，里面有一些内容：

.row{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4px;
    margin:0px 5% 20px 0;
    box-sizing: border-box;
}
.col-sm-4 {
        margin: 1%;
        background-color: rgba(0,0,0,0.25);
        flex: 30%;
        padding: 3px;
        max-width: 30%;
        height: 400px;
        min-width: 20%;
    }

<div class="row">
            <div class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </div>
            <div class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </div>
</div>

我想添加一些独特的链接来覆盖行中的每个div。 我怎样才能做到这一点？

Answer 1

根本不要使用div ...请使用相同类别的链接。没有规则说你有使用div。

现在整个div 是一个链接。

.row{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4px;
    margin:0px 5% 20px 0;
    box-sizing: border-box;
}
.col-sm-4 {
        margin: 1%;
        background-color: rgba(0,0,0,0.25);
        flex: 30%;
        padding: 3px;
        max-width: 30%;
        height: 400px;
        min-width: 20%;
    }

<div class="row">
            <a href="#1" class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </a>
            <a href="#2" class="col-sm-4">                
                <div id="Header"><h3>Header</h3></div>
                <p>content.</p>
                <div id="Footer"><h2>By Author</h2></div>
            </a>
</div>

或者，定位一个绝对超过div的链接..

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 4px;
  margin: 0px 5% 20px 0;
  box-sizing: border-box;
}

.col-sm-4 {
  margin: 1%;
  background-color: rgba(0, 0, 0, 0.25);
  flex: 30%;
  padding: 3px;
  max-width: 30%;
  height: 400px;
  min-width: 20%;
  position: relative
}

.col-sm-4 a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="row">
  <div class="col-sm-4">
    <a href="#1">Link here</a>
    <div id="Header">
      <h3>Header</h3>
    </div>
    <p>content.</p>
    <div id="Footer">
      <h2>By Author</h2>
    </div>
  </div>
  <div class="col-sm-4">
    <a href="#2">Link here</a>
    <div id="Header">
      <h3>Header</h3>
    </div>
    <p>content.</p>
    <div id="Footer">
      <h2>By Author</h2>
    </div>
  </div>
</div>

Answer 2

我相信你不能在powershell.exe -ExecutionPolicy Bypass -file C:\temp\download-rpi.ps1 "\\drives\savehere" 标签中封装.col-sm-4而不破坏Bootstrap的布局机制。

但是，作为一种变通方法，您可以将<a>权限放在 div中并封装其所有内容：

<a>

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 4px;
  margin: 0px 5% 20px 0;
  box-sizing: border-box;
}

.col-sm-4 {
  margin: 1%;
  background-color: rgba(0, 0, 0, 0.25);
  flex: 30%;
  padding: 3px;
  max-width: 30%;
  height: 400px;
  min-width: 20%;
}

a {
   border : blue dashed 1px;
   display: block;
   height: 100%;
}

Answer 3

＆＃13;

＆＃13;

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 4px;
  margin: 0px 5% 20px 0;
  box-sizing: border-box;
}

.col-sm-4 {
  margin: 1%;
  background-color: rgba(0, 0, 0, 0.25);
  flex: 30%;
  padding: 3px;
  max-width: 30%;
  height: 400px;
  min-width: 20%;
}

＆＃13;

<div class="row">
  <a href="#">
    <div class="col-sm-4">
      <div id="Header">
        <h3>Header</h3>
      </div>
      <p>content.</p>
      <div id="Footer">
        <h2>By Author</h2>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="col-sm-4">
      <div id="Header">
        <h3>Header</h3>
      </div>
      <p>content.</p>
      <div id="Footer">
        <h2>By Author</h2>
      </div>
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;