小贝子编程

位于底部没有重叠的底部



试图将DIV的位置设置为底部。但是，有一个不应该存在的重叠。

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

我将其设置在带有bootstrap的片段中，因此更容易理解功能。

有什么想法？

$(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);
		});
	});
});
.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;
}
<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>

仅调整.littpadding

的底部填充

$(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);
		});
	});
});
.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;
}
<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>

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

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

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

$(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);
		});
	});
});
.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;
}
<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>

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

在您的CSS代码上添加保证金底。liveonfiddle 

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium