如何填写父母身高？

-4

.solid_color{ 
 
    background-color: gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
    <div class="solid_color col-xs-3"></div> 
 
    <div class="col-xs-9"> 
 
     " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " 
 
     <i>(Quote from someone)</i> 
 
    </div> 
 
</div>

目前div.solid_color是一条线。它的高度应与邻居元素的高度相同。我怎样才能做到这一点？

来源

2017-10-28 stack

的[制作一个div填补余下的屏幕空间的高度（可能的复制https://stackoverflow.com/questions/90178/make-a-div-fill-the-height剩余的屏幕空间）以及通过搜索搜索到的许多相同的答案。 – Rob

@RacilHilan我无法为父母定义任何特定高度，因为该句子的长度是动态的。 – stack

可能的重复[如何保持两个div并排相同的高度？]（https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are- –

将display: flex;添加到您的父容器中，并从子div中删除height: 100%;。

.solid_color{ 
 
    background-color: gray; 
 
} 
 
.myparent{ 
 
display: flex; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="myparent"> 
 
    <div class="solid_color col-xs-3"></div> 
 
    <div class="col-xs-9"> 
 
     " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " 
 
     <i>(Quote from someone)</i> 
 
    </div> 
 
</div>

希望这有助于

来源

2017-10-28 13:39:51

你可以只用选择通过JS做到这一点，并找到getBoundingClientRect所需的高度。

var height = document.querySelector('.col-xs-9').getBoundingClientRect().height; 
 
document.querySelector('.solid_color').style.height = height + 'px';

.solid_color{ 
 
    background-color: gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
    <div class="solid_color col-xs-3"></div> 
 
    <div class="col-xs-9"> 
 
     " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " 
 
     <i>(Quote from someone)</i> 
 
    </div> 
 
</div>

来源

2017-10-28 13:42:20 Nick

结果是正确的（如预期的那样）。谢谢，upvopte。只是没有任何方法可以通过纯CSS来实现这一点？ – stack

您可以用Flexbox的做到这一点：

.parent { 
 
    display: flex; 
 
} 
 

 
.solid_color { 
 
    background-color: gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="parent"> 
 
    <div class="solid_color col-xs-3"></div> 
 
    <div class="col-xs-9"> 
 
     " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " 
 
     <i>(Quote from someone)</i> 
 
    </div> 
 
</div>

来源

2017-10-28 13:45:14 VXp

谢谢，upvote – stack

我会给与背景颜色绝对和推动的位置DIV在一些米与文本的div argin。请参见下面的代码：

<!DOCTYPE html> 
<html> 

    <head> 
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
    </head> 
     <style> 
      .solid_color { 
       position: absolute; 
       left: 0; 
       top: 0; 
       width: 25%; 
       height: 100%; 
       background-color: gray; 
      } 
      .outer { 
       position: relative; 
       float: left; 
       display: block; 
       width: 100%; 
      } 
      .right-text { 
       margin-left: 25%; 
      } 

     </style> 
    </head> 
    <body> 
     <div class="outer"> 
     <div class="solid_color col-xs-3"></div> 
     <div class="right-text col-xs-9"> 
      " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " 
      <i>(Quote from someone)</i> 
     </div> 
    </div> 
    </body> 

</html>

来源

2017-10-28 14:05:15

如何填写父母身高？

回答

相关问题