2
嘗試將底部的位置設置爲底部。但是，這種重疊不應該存在。底部不重疊的位置
試圖通過使用填充，邊距，高度等來消除重疊，但沒有解決我的問題。
我使用Bootstrap將其設置爲片段，因此更容易理解功能。
任何想法？
$(document).ready(function() {
\t $('.text').hide();
\t $('.expander').click(function() {
\t \t $(this).parent().next().slideToggle(200);
\t });
\t $('.text').slideUp(200);
});
$(function() {
\t $('.expander').click(function(){
\t \t $(this).children('img').each(function(){
\t \t \t $(this).toggle(0);
\t \t });
\t });
});.red { background-color: #cc1042; }
.whitetext { color: #ffffff; }
.whitelink a { color: #ffffff; }
.littpadding { \t padding: 15px 15px 15px 15px; }
.positionrelative {
\t position: relative;
}
.close {
\t opacity: 1!important;
}
.close:focus, .close:hover {
\t opacity: 1!important;
}
.clickexpander {
\t position:absolute;
\t bottom: 0;
}
.clickexpander img {
\t max-width: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="holder">
\t <div class="container">
\t \t <div class="row">
\t \t \t <div class="col-md-1"></div>
\t \t \t <div class="col-md-10">
\t \t \t \t <div class="row">
\t \t \t \t
\t \t \t \t \t <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
\t \t \t \t \t \t <div class="littpadding red">
\t \t \t \t \t \t \t <h2>Sesong</h2>
\t \t \t \t \t \t \t <h3>1990,- pr år</h3>
\t \t \t \t \t \t \t <a href="#/" title="Prisliste" data-target="#">
\t \t \t \t \t \t \t \t <div class="expander clickexpander">
\t \t \t \t \t \t \t \t \t <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
\t \t \t \t \t \t \t \t \t <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div style="display:none;">
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <div class="col-md-12">
\t \t \t \t \t \t \t \t \t \t <div class="littluft">
\t \t \t \t \t \t \t \t \t \t \t <div class="lefttext littluft">
\t \t \t \t \t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t \t \t \t \t Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#">Bestill.</a>
\t \t \t \t \t \t \t \t \t \t \t \t </p> \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
\t \t \t \t \t \t <div class="littpadding red">
\t \t \t \t \t \t \t <h2>Sesong</h2>
\t \t \t \t \t \t \t <h3>1990,- pr år</h3>
\t \t \t \t \t \t \t <a href="#/" title="Prisliste" data-target="#">
\t \t \t \t \t \t \t \t <div class="expander clickexpander">
\t \t \t \t \t \t \t \t \t <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
\t \t \t \t \t \t \t \t \t <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div style="display:none;">
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <div class="col-md-12">
\t \t \t \t \t \t \t \t \t \t <div class="littluft">
\t \t \t \t \t \t \t \t \t \t \t <div class="lefttext littluft">
\t \t \t \t \t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t \t \t \t \t Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#">Bestill.</a>
\t \t \t \t \t \t \t \t \t \t \t \t </p> \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
\t \t \t \t \t \t <div class="littpadding red">
\t \t \t \t \t \t \t <h2>Sesong</h2>
\t \t \t \t \t \t \t <h3>1990,- pr år</h3>
\t \t \t \t \t \t \t <a href="#/" title="Prisliste" data-target="#">
\t \t \t \t \t \t \t \t <div class="expander clickexpander">
\t \t \t \t \t \t \t \t \t <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
\t \t \t \t \t \t \t \t \t <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div style="display:none;">
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <div class="col-md-12">
\t \t \t \t \t \t \t \t \t \t <div class="littluft">
\t \t \t \t \t \t \t \t \t \t \t <div class="lefttext littluft">
\t \t \t \t \t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t \t \t \t \t Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#">Bestill.</a>
\t \t \t \t \t \t \t \t \t \t \t \t </p> \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
\t \t \t \t \t \t <div class="littpadding red">
\t \t \t \t \t \t \t <h2>Sesong</h2>
\t \t \t \t \t \t \t <h3>1990,- pr år</h3>
\t \t \t \t \t \t \t <a href="#/" title="Prisliste" data-target="#">
\t \t \t \t \t \t \t \t <div class="expander clickexpander">
\t \t \t \t \t \t \t \t \t <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
\t \t \t \t \t \t \t \t \t <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div style="display:none;">
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <div class="col-md-12">
\t \t \t \t \t \t \t \t \t \t <div class="littluft">
\t \t \t \t \t \t \t \t \t \t \t <div class="lefttext littluft">
\t \t \t \t \t \t \t \t \t \t \t \t <p>
\t \t \t \t \t \t \t \t \t \t \t \t \t Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#">Bestill.</a>
\t \t \t \t \t \t \t \t \t \t \t \t </p> \t \t \t \t
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-md-1"></div>
\t \t </div>
\t </div>
</div>
使用'位置：absolute'採取DIV跳出流程 - 這是預期，因此重疊...... – kukkuz