底部位置没有重叠

Question

尝试将div的位置设置为底部。但是，重叠不应该存在。

尝试使用填充，边距，高度等来删除重叠，但没有解决我的问题。

我将其设置在Bootstrap的片段中，以便更容易理解其功能。

有什么想法吗？

＆＃13;

＆＃13;

$(document).ready(function () {
	$('.text').hide();
	$('.expander').click(function () {
		$(this).parent().next().slideToggle(200);
	});
	$('.text').slideUp(200);
});

$(function() {
	$('.expander').click(function(){
		$(this).children('img').each(function(){
			$(this).toggle(0);
		});
	});
});

＆＃13;

.red { background-color: #cc1042; }
.whitetext { color: #ffffff; }
.whitelink a { color: #ffffff; }

.littpadding {	padding: 15px 15px 15px 15px;  }

.positionrelative {
	position: relative;
}

.close { 
	opacity: 1!important;
}

.close:focus, .close:hover {
	opacity: 1!important;
}

.clickexpander {
	position:absolute;
	bottom: 0;
}

.clickexpander img {
	max-width: 50px;
}

＆＃13;

<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">
	<div class="container">
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<div class="row">
				
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-1"></div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

仅调整.littpadding

的底部填充

＆＃13;

＆＃13;

$(document).ready(function () {
	$('.text').hide();
	$('.expander').click(function () {
		$(this).parent().next().slideToggle(200);
	});
	$('.text').slideUp(200);
});

$(function() {
	$('.expander').click(function(){
		$(this).children('img').each(function(){
			$(this).toggle(0);
		});
	});
});

＆＃13;

.red { background-color: #cc1042; }
.whitetext { color: #ffffff; }
.whitelink a { color: #ffffff; }

.littpadding {	padding: 15px 15px 42px 15px;  }

.positionrelative {
	position: relative;
}

.close { 
	opacity: 1!important;
}

.close:focus, .close:hover {
	opacity: 1!important;
}

.clickexpander {
	position:absolute;
	bottom: 0;
}

.clickexpander img {
	max-width: 50px;
}

＆＃13;

<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">
  <div class="container">
<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-10">
    <div class="row">
      <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
        <div class="littpadding red">
          <h2>Sesong</h2>
          <h3>1990,- pr år</h3>
          <a href="#/" title="Prisliste" data-target="#">
          <div class="expander clickexpander"> <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;"> <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;"> </div>
          </a>
          <div style="display:none;">
            <div class="row">
              <div class="col-md-12">
                <div class="littluft">
                  <div class="lefttext littluft">
                    <p> Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
                      Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/>
                      <br/>
                      <a href="#">Bestill.</a> </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
        <div class="littpadding red">
          <h2>Sesong</h2>
          <h3>1990,- pr år</h3>
          <a href="#/" title="Prisliste" data-target="#">
          <div class="expander clickexpander"> <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;"> <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;"> </div>
          </a>
          <div style="display:none;">
            <div class="row">
              <div class="col-md-12">
                <div class="littluft">
                  <div class="lefttext littluft">
                    <p> Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
                      Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/>
                      <br/>
                      <a href="#">Bestill.</a> </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
        <div class="littpadding red">
          <h2>Sesong</h2>
          <h3>1990,- pr år</h3>
          <a href="#/" title="Prisliste" data-target="#">
          <div class="expander clickexpander"> <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;"> <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;"> </div>
          </a>
          <div style="display:none;">
            <div class="row">
              <div class="col-md-12">
                <div class="littluft">
                  <div class="lefttext littluft">
                    <p> Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
                      Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/>
                      <br/>
                      <a href="#">Bestill.</a> </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
        <div class="littpadding red">
          <h2>Sesong</h2>
          <h3>1990,- pr år</h3>
          <a href="#/" title="Prisliste" data-target="#">
          <div class="expander clickexpander"> <img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;"> <img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;"> </div>
          </a>
          <div style="display:none;">
            <div class="row">
              <div class="col-md-12">
                <div class="littluft">
                  <div class="lefttext littluft">
                    <p> Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
                      Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/>
                      <br/>
                      <a href="#">Bestill.</a> </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-1"></div>
</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

扩展.littpadding类的填充底部是可能的。 喜欢 .littpadding { padding: 15px 15px 40px 15px; }

你也可以从箭头中删除绝对位置

Answer 3

尝试将margin-bottom添加到.littpadding h3和.lefttext p。看看这对你有帮助，如下所示：

＆＃13;

＆＃13;

$(document).ready(function () {
	$('.text').hide();
	$('.expander').click(function () {
		$(this).parent().next().slideToggle(200);
	});
	$('.text').slideUp(200);
});

$(function() {
	$('.expander').click(function(){
		$(this).children('img').each(function(){
			$(this).toggle(0);
		});
	});
});

＆＃13;

.red { background-color: #cc1042; }
.whitetext { color: #ffffff; }
.whitelink a { color: #ffffff; }

.littpadding {	padding: 15px 15px 15px 15px;  }

.littpadding h3 {
  margin-bottom: 50px;
}

.positionrelative {
	position: relative;
}

.close { 
	opacity: 1!important;
}

.close:focus, .close:hover {
	opacity: 1!important;
}

.clickexpander {
	position:absolute;
	bottom: 0;
}

.clickexpander img {
	max-width: 50px;
}

.lefttext p {
  margin-bottom: 50px;
}

＆＃13;

<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">
	<div class="container">
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<div class="row">
				
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="col-md-3 col-sm-3 whitetext centertext positionrelative whitelink">
						<div class="littpadding red">
							<h2>Sesong</h2>
							<h3>1990,- pr år</h3>
							<a href="#/" title="Prisliste" data-target="#">
								<div class="expander clickexpander">
									<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
									<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
								</div>
							</a>
							
							<div style="display:none;">
								<div class="row">
									<div class="col-md-12">
										<div class="littluft">
											<div class="lefttext littluft">
												<p>
													Befaring av hytte/fritidshus og befaringsrapport 4 ganger årlig. <br/>
													Ubegrenset antall befaringer/utrykninger ved storm/uvær. <br/><br/>
													<a href="#">Bestill.</a>
												</p>				
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-1"></div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助（y）。

Answer 4

在你的css代码上添加margin-bottom。 LiveOnFiddle

.lefttext,.littpadding>h3 {
  margin-bottom:40px;
}