divs span span更改父元素的高度

时间：2015-09-28 14:46:35

标签： html css

我创建了一个svg图标的小方格，并将它们立即放在标题中某些文本的右侧。

网格创建如下：

<div>HEADER TEXT    
  <span>
    <div>
      <svg></svg>
      <svg></svg>
    </div>
    <div>
      <svg></svg>
      <svg></svg>
    </div>
  </span>
</div>

跨度css是：

display: inline-block;

现在这一切都很好，花花公子，除了包含这个图标网格的div，增长了一个div的高度。

即。如果包含一行图标的div高度为20px，则外部div的高度会增加，从70px增加到90px。

我认为这是由于堆叠的div。

将高度设置为显式保持在70px，比如说，并没有做到这一点，因为事情只会向下移动并延伸到div。

无论如何都要抑制这种行为？或者是否有另一种不那么“hacky”的方法来实现不会遇到这个问题的图标网格？

我做了一个漂亮的小plnkr来准确显示这是怎么回事......

http://plnkr.co/edit/IcXkse4XLnDI83OQ7G4S

2 个答案:

答案 0 :(得分：2)

立即修复是将font-size: 0;添加到.share-square-div。这样可以解决此问题，因为.share-square-div从font-size: 62px;继承.header，默认情况下您的SVG为display: inline;。因此，浏览器将SVG视为文本，将.share-square-div扩展为包含文本。但由于它已设置height，因此SVG会溢出它。

我在下面添加了一个粗略的演示。

var $button = $('#button');
var $shareSquareDiv = $('.share-square-div');
var step = 0;

$button.on('click', cycleExample);
cycleExample();

function cycleExample() {
  switch (step) {
    case 0:
      $button.text('hide overflow on .share-square-div');
      $shareSquareDiv.each( function() {
        $(this).css('background-color', 'orange');
        $(this).css('font-size', '');
      });
      break;
    case 1:
      $button.text('set height to auto on .share-square-div');
      $shareSquareDiv.each( function() {
        $(this).css('overflow', 'hidden');
      });
      break;  
    case 2:
      $button.text('reset height to 20px and set font-size to 0');
      $shareSquareDiv.each( function() {
        $(this).css('height', 'auto');
        $(this).css('overflow', '');
      });
      break;  
    case 3:
      $button.text('success! restart demo');
      $shareSquareDiv.each( function() {
        $(this).css('height', '');
        $(this).css('font-size', '0');
        $(this).css('background-color', '');
      });
      step = -1;
      break;
  }
  
  step++;
}
/* Styles go here */
.share-square-span {
	display: inline-block;
}

.share-square-div {
	height: 20px;
  
    /* ===add this=== */
    /* font-size: 0; */
    /* ============== */
}

.share-icon {
	margin-right: 4px;
}


.header {
	font-size: 62px;
	font-weight: 300;
	text-align: center;
}

.fixed-height-header {
  height: 71px;
  font-size: 62px;
	font-weight: 300;
	text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button"></button>
<div class="header" style="background:blue;">First Header</div>

    
    <div class="header" style="background:yellow;"><span>Second Header</span>
    
    	<span class="share-square-span">
		
  			<div class="share-square-div"><!-- 
  				
  				--><svg class="share-icon" enable-background="new 0 0 266.893 266.895" height="16px" id="Layer_1" version="1.1" viewBox="0 0 266.893 266.895" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        				<path d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812  c0-7.856-6.368-14.224-14.223-14.224H18.812c-7.856,0-14.224,6.367-14.224,14.224v229.271c0,7.854,6.366,14.225,14.224,14.225  H248.082z" fill="#3C5A99" id="Blue_1_"/>
        				<path d="M185.076,246.307v-99.803h33.499l5.016-38.896h-38.515V82.777c0-11.261,3.127-18.935,19.274-18.935  l20.596-0.009V29.045c-3.562-0.475-15.787-1.533-30.012-1.533c-29.694,0-50.024,18.126-50.024,51.413v28.684h-33.585v38.896h33.585  v99.803H185.076z" fill="#FFFFFF" id="f"/>
      			</svg><!--
      
      			--><svg class="share-icon" enable-background="new 0 0 64 64" height="16px" id="Layer_1" version="1.1" viewBox="0 0 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M62.967,52.35c0,5.863-4.753,10.617-10.618,10.617H11.65c-5.863,0-10.617-4.754-10.617-10.617v-40.7  c0-5.863,4.753-10.617,10.617-10.617h40.699c5.864,0,10.618,4.753,10.618,10.617V52.35z" fill="#60A8DC"/>
  					<g id="XMLID_1_"><g><path d="M5.515,48.65c0.846,0.104,1.713,0.154,2.59,0.154c5.098,0,9.783-1.744,13.488-4.653    c-4.757-0.094-8.762-3.23-10.145-7.554c0.671,0.134,1.352,0.196,2.054,0.196c0.991,0,1.94-0.134,2.858-0.382    c-4.984-1.001-8.72-5.387-8.72-10.66c0-0.041,0-0.083,0-0.134c1.465,0.815,3.137,1.3,4.922,1.362c-2.91-1.95-4.83-5.273-4.83-9.05    c0-1.992,0.537-3.86,1.465-5.459c5.366,6.573,13.374,10.897,22.404,11.351c-0.186-0.794-0.279-1.62-0.279-2.477    c0-6.006,4.861-10.866,10.856-10.866c3.137,0,5.964,1.321,7.946,3.426c2.477-0.485,4.799-1.383,6.904-2.631    c-0.805,2.539-2.528,4.665-4.788,6.016c2.208-0.268,4.293-0.856,6.253-1.713c-1.455,2.177-3.302,4.086-5.428,5.624    c0.011,0.464,0.021,0.939,0.021,1.404c0,14.365-10.918,30.927-30.907,30.927C16.041,53.531,10.313,51.735,5.515,48.65z" fill="#FFFFFF"/></g><g/></g>
  				</svg>
  				
  			</div>
  		
  			<div class="share-square-div"><!--
  			
  				--><svg class="share-icon" enable-background="new -16 -16 64 64" height="16px" id="Layer_1" version="1.1" viewBox="-16 -16 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M47.083,35.427c0,6.438-5.219,11.656-11.656,11.656H-3.427c-6.438,0-11.656-5.219-11.656-11.656V-3.427  c0-6.438,5.219-11.656,11.656-11.656h38.854c6.438,0,11.656,5.219,11.656,11.656V35.427z" fill="#D93725"/>
  					<g>
  						<path d="M16.724,20.112c-1.528-1.079-4.444-3.705-4.444-5.251c0-1.809,0.518-2.7,3.239-4.828   c2.789-2.182,4.77-5.755,4.77-9.326c0-4.244-1.896-6.848-5.444-10.254h5.354l3.778-1.703c0,0-12.662,0-16.884,0   c-7.571,0-14.691,5.726-14.691,12.365c0,6.79,5.158,12.265,12.859,12.265c0.535,0,1.056-0.014,1.565-0.048   c-0.501,0.955-0.856,2.03-0.856,3.149c0,1.886,1.016,3.416,2.296,4.666c-0.966,0-1.904,0.027-2.924,0.027   c-9.38,0-16.592,5.968-16.592,12.161c0,6.094,7.91,9.914,17.283,9.914c10.688,0,16.589-6.067,16.589-12.164   C22.624,26.194,21.181,23.272,16.724,20.112z M7.703,11.653c-4.351-0.13-8.482-4.866-9.234-10.574   C-2.279-4.636,0.636-9.007,4.982-8.878c4.35,0.133,8.483,4.715,9.236,10.427C14.969,7.263,12.051,11.783,7.703,11.653z    M5.999,40.549c-6.48,0-11.16-4.098-11.16-9.027c0-4.829,5.804-8.85,12.285-8.778c1.513,0.02,2.922,0.258,4.199,0.676   c3.518,2.446,6.042,3.832,6.759,6.613c0.129,0.567,0.203,1.152,0.203,1.746C18.285,36.699,15.11,40.549,5.999,40.549z" fill="#FFFFFF"/><polygon fill="#FFFFFF" points="34.732,12.594 34.732,4.078 31.327,4.078 31.327,12.594 22.812,12.594 22.812,16 31.327,16    31.327,24.515 34.732,24.515 34.732,16 43.25,16 43.25,12.594  "/>
  					</g>
  				</svg><!--
  
  				--><svg class="share-icon" height="16px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M456,506H56c-27.617,0-50-22.393-50-50V56  C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408  c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488  c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498,55.498c0,2.832,0.43,5.557,0.84,8.272l-94.922,52.705  c-10.097-10.537-24.248-17.168-40-17.168c-30.644,0-55.488,24.844-55.488,55.488c0,30.654,24.844,55.498,55.488,55.498  c15.264,0,29.073-6.172,39.102-16.142l95.176,52.851c1.035,29.736,25.312,53.565,55.302,53.565  c30.655,0,55.498-24.844,55.498-55.499c0-30.644-24.843-55.488-55.498-55.488c-17.08,0-32.177,7.891-42.353,20.03l-92.1-51.133  C213.93,261.849,214.213,260.668,214.213,259.408z" id="share_1_" style="fill-rule:evenodd;clip-rule:evenodd;fill:grey;"/>
  				</svg>
  
  			</div>
		
		  </span>

    <div class="fixed-height-header" style="background:green;"><span>Third Header</span>
    
    	<span class="share-square-span">
		
  			<div class="share-square-div"><!-- 
  				
  				--><svg class="share-icon" enable-background="new 0 0 266.893 266.895" height="16px" id="Layer_1" version="1.1" viewBox="0 0 266.893 266.895" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        				<path d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812  c0-7.856-6.368-14.224-14.223-14.224H18.812c-7.856,0-14.224,6.367-14.224,14.224v229.271c0,7.854,6.366,14.225,14.224,14.225  H248.082z" fill="#3C5A99" id="Blue_1_"/>
        				<path d="M185.076,246.307v-99.803h33.499l5.016-38.896h-38.515V82.777c0-11.261,3.127-18.935,19.274-18.935  l20.596-0.009V29.045c-3.562-0.475-15.787-1.533-30.012-1.533c-29.694,0-50.024,18.126-50.024,51.413v28.684h-33.585v38.896h33.585  v99.803H185.076z" fill="#FFFFFF" id="f"/>
      			</svg><!--
      
      			--><svg class="share-icon" enable-background="new 0 0 64 64" height="16px" id="Layer_1" version="1.1" viewBox="0 0 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M62.967,52.35c0,5.863-4.753,10.617-10.618,10.617H11.65c-5.863,0-10.617-4.754-10.617-10.617v-40.7  c0-5.863,4.753-10.617,10.617-10.617h40.699c5.864,0,10.618,4.753,10.618,10.617V52.35z" fill="#60A8DC"/>
  					<g id="XMLID_1_"><g><path d="M5.515,48.65c0.846,0.104,1.713,0.154,2.59,0.154c5.098,0,9.783-1.744,13.488-4.653    c-4.757-0.094-8.762-3.23-10.145-7.554c0.671,0.134,1.352,0.196,2.054,0.196c0.991,0,1.94-0.134,2.858-0.382    c-4.984-1.001-8.72-5.387-8.72-10.66c0-0.041,0-0.083,0-0.134c1.465,0.815,3.137,1.3,4.922,1.362c-2.91-1.95-4.83-5.273-4.83-9.05    c0-1.992,0.537-3.86,1.465-5.459c5.366,6.573,13.374,10.897,22.404,11.351c-0.186-0.794-0.279-1.62-0.279-2.477    c0-6.006,4.861-10.866,10.856-10.866c3.137,0,5.964,1.321,7.946,3.426c2.477-0.485,4.799-1.383,6.904-2.631    c-0.805,2.539-2.528,4.665-4.788,6.016c2.208-0.268,4.293-0.856,6.253-1.713c-1.455,2.177-3.302,4.086-5.428,5.624    c0.011,0.464,0.021,0.939,0.021,1.404c0,14.365-10.918,30.927-30.907,30.927C16.041,53.531,10.313,51.735,5.515,48.65z" fill="#FFFFFF"/></g><g/></g>
  				</svg>
  				
  			</div>
  		
  			<div class="share-square-div"><!--
  			
  				--><svg class="share-icon" enable-background="new -16 -16 64 64" height="16px" id="Layer_1" version="1.1" viewBox="-16 -16 64 64" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M47.083,35.427c0,6.438-5.219,11.656-11.656,11.656H-3.427c-6.438,0-11.656-5.219-11.656-11.656V-3.427  c0-6.438,5.219-11.656,11.656-11.656h38.854c6.438,0,11.656,5.219,11.656,11.656V35.427z" fill="#D93725"/>
  					<g>
  						<path d="M16.724,20.112c-1.528-1.079-4.444-3.705-4.444-5.251c0-1.809,0.518-2.7,3.239-4.828   c2.789-2.182,4.77-5.755,4.77-9.326c0-4.244-1.896-6.848-5.444-10.254h5.354l3.778-1.703c0,0-12.662,0-16.884,0   c-7.571,0-14.691,5.726-14.691,12.365c0,6.79,5.158,12.265,12.859,12.265c0.535,0,1.056-0.014,1.565-0.048   c-0.501,0.955-0.856,2.03-0.856,3.149c0,1.886,1.016,3.416,2.296,4.666c-0.966,0-1.904,0.027-2.924,0.027   c-9.38,0-16.592,5.968-16.592,12.161c0,6.094,7.91,9.914,17.283,9.914c10.688,0,16.589-6.067,16.589-12.164   C22.624,26.194,21.181,23.272,16.724,20.112z M7.703,11.653c-4.351-0.13-8.482-4.866-9.234-10.574   C-2.279-4.636,0.636-9.007,4.982-8.878c4.35,0.133,8.483,4.715,9.236,10.427C14.969,7.263,12.051,11.783,7.703,11.653z    M5.999,40.549c-6.48,0-11.16-4.098-11.16-9.027c0-4.829,5.804-8.85,12.285-8.778c1.513,0.02,2.922,0.258,4.199,0.676   c3.518,2.446,6.042,3.832,6.759,6.613c0.129,0.567,0.203,1.152,0.203,1.746C18.285,36.699,15.11,40.549,5.999,40.549z" fill="#FFFFFF"/><polygon fill="#FFFFFF" points="34.732,12.594 34.732,4.078 31.327,4.078 31.327,12.594 22.812,12.594 22.812,16 31.327,16    31.327,24.515 34.732,24.515 34.732,16 43.25,16 43.25,12.594  "/>
  					</g>
  				</svg><!--
  
  				--><svg class="share-icon" height="16px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  					<path d="M456,506H56c-27.617,0-50-22.393-50-50V56  C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408  c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488  c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498,55.498c0,2.832,0.43,5.557,0.84,8.272l-94.922,52.705  c-10.097-10.537-24.248-17.168-40-17.168c-30.644,0-55.488,24.844-55.488,55.488c0,30.654,24.844,55.498,55.488,55.498  c15.264,0,29.073-6.172,39.102-16.142l95.176,52.851c1.035,29.736,25.312,53.565,55.302,53.565  c30.655,0,55.498-24.844,55.498-55.499c0-30.644-24.843-55.488-55.498-55.488c-17.08,0-32.177,7.891-42.353,20.03l-92.1-51.133  C213.93,261.849,214.213,260.668,214.213,259.408z" id="share_1_" style="fill-rule:evenodd;clip-rule:evenodd;fill:grey;"/>
  				</svg>
  
  			</div>
		
		  </span>
    </div>

答案 1 :(得分：0)

默认情况下，div显示：block。您需要使用display：inherit或display：inline分配给div来覆盖它们。

<style>
    div {display:inline}
</style>
<span>
    <div>row 1, cell 1</div>
    <div>row 1, cell 2</div>
</span>

如果您想确保无论内容如何都具有相同的宽度：

<style>
   div{ display: inline; overflow: hidden; width: 20px, height: 20px }
</style>

您可以使用表格来简化这一过程，但在所有屏幕分辨率下都无法很好地扩展。

相关问题
最新问题