如何填寫父母身高？

-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

如何填寫父母身高？

回答

相關問題