Onclick文本出现在div旁边而不是在下面

Question

我的代码有问题我希望显示在onclick上的文本位于主div下面，但它显示在旁边。有人能够弄清楚我犯的错误或者我可以添加到我的代码中以纠正这个错误吗？我还有另一个问题，我如何在我的div之间添加空格，因为我放了一个蓝色背景，但我不想像一个块。谢谢

<style type="text/css">
  .link{text-decoration:none; color:white;}

  .link:visited{color:white}

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

div {font-family:'Varela Round';
}
  
  .opener {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.benefits {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width:300px;
}
</style>
<style type="text/css">}
a {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: white;
}
#upbutton {
  border: 1px dotted white;
}
</style>
<script>function show(id) { 
        if(document.getElementById('b'+id).style.display=='none') { 
            document.getElementById('b'+id).style.display='block'; 
        } 
        return false;
    } 
    function hide(id) { 
        if(document.getElementById('b'+id).style.display=='block') { 
            document.getElementById('b'+id).style.display='none'; 
        } 
        return false;
    }
</script>
<div class="row">
<div class="opener col"><a href="#1" name="1" onclick=" show('1');" class="link">SOCIETES: 400</a></div>

<div class="benefits" id="b1" style="display:none;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');" >fermer</a></div>
</div>

<div class="opener col"><a href="#1" name="1" onclick=" show('2');" class="link" >CONTACTS: 25 400</a></div>

<div class="benefits col" id="b2" style="display:none;">Part CAC 40 : 15 700<br />
Part Filiales +100M€: 9 700<br />
% contacts IT: 21%
<div id="upbutton"><a onclick=" hide('2');">fermer</a></div>
</div>

<div class="opener col">EMAILS NOMINATIFS: 400</div>

<div class="opener col">OPT OUT: 3%</div>

  <div class="opener col">LIGNES DIRECTES: 35%</div></div>

Answer 1

只需在开启者div旁边添加隐藏的div，它就会出现在它下面，为了在div之间添加空格你可以使用border属性作为opener div，试试下面的代码：

＆＃13;

＆＃13;

<style type="text/css">
  .link{text-decoration:none; color:white;}

  .link:visited{color:white}

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

div {font-family:'Varela Round';
}
  
  .opener {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: 1px white solid;
}

.benefits {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width:300px;
}
</style>
<style type="text/css">}
a {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: white;
}
#upbutton {
  border: 1px dotted white;
}
</style>
<script>function show(id) { 
        if(document.getElementById('b'+id).style.display=='none') { 
            document.getElementById('b'+id).style.display='block'; 
        } 
        return false;
    } 
    function hide(id) { 
        if(document.getElementById('b'+id).style.display=='block') { 
            document.getElementById('b'+id).style.display='none'; 
        } 
        return false;
    }
</script>
<div class="row">
<div class="opener col"><a href="#1" name="1" onclick=" show('1');" class="link">SOCIETES: 400</a>

<div class="benefits" id="b1" style="display:none;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');" >fermer</a></div>
</div>
</div>

<div class="opener col"><a href="#1" name="1" onclick=" show('2');" class="link" >CONTACTS: 25 400</a>

<div class="benefits col" id="b2" style="display:none;">Part CAC 40 : 15 700<br />
Part Filiales +100M€: 9 700<br />
% contacts IT: 21%
<div id="upbutton"><a onclick=" hide('2');">fermer</a></div>
</div>
</div>
<div class="opener col">EMAILS NOMINATIFS: 400</div>

<div class="opener col">OPT OUT: 3%</div>

  <div class="opener col">LIGNES DIRECTES: 35%</div></div>

＆＃13;

＆＃13;

＆＃13;