次の2つのdivを互いに整列させる方法は、最初は固定幅、2番目は動的高さです

Question

次のシナリオでは、応答性の高いCSSを作成しようとしています。 divコンテナ（以降、「親div /コンテナ」と呼ばれます）があります。そのdivの中には、アイコン（下の「X」で表される）とその隣のdiv内のテキスト（「Y」の下に表示される）があります。 「X」と「Y」の両方の枠には枠線があります。アイコンの幅は44ピクセルで、 'Y'コンテナは残りの幅の100％にします。画面のサイズが変更された場合は、「Y」コンテナがたわみ、必要に応じて追加の線を取り上げたり取り除いたりします。テキストが長すぎて1行に収まらない場合は、それ自身のコンテナ内で折り返します。おおよそこのように：

私はこれをいくつかの方法で試しましたが、私は満足していません。私の現在の試み（やや簡略化）：

#parent { position:relative; } 
#X { width: 44px; border: 1px solid red;} 
#Y { position: absolute: left: 44px; top: 0px; border: 1px solid red } 

この作品私の要件の数について、テキストを複数行に「Y」コンテナが親コンテナよりも大きく、さらに重なっての高さをオーバーフローした場合ことを除いて、親コンテナの下のコンテンツまた、残りの幅を埋めることもありません。

私はより洗練されたCSS専用ソリューションを探しています。どんな助けにも感謝！ HTMLは次のようになります：

EDIT

<div id='parent'> 
    <div id='X'><i class="fa fa-exclamation-triangle"></i></div> 
    <div id='Y'>text goes here</div> 
</div> 

Answer 1

最も簡単な解決策は、以下に示すようにdisplay: flex用いることであろう。それはあなたが子供の要素についてあまり気にしないで、必要なものを正確に持つことができます。

#parent { 
 
    /* Set parent to flex, starting at 
 
    the very left corner. */ 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    /* If you want the icon to be on top, 
 
    use flex-start instead of center */ 
 
    align-items: center; 
 
} 
 

 
#X { 
 
    /* Set fixed width. This part is important, 
 
    otherwise it would stretch the icon */ 
 
    width: 44px; 
 
} 
 

 
#Y { 
 
    /* Set the #Y container to 100% width. 
 
    It will be stretched since it is a 
 
    relative width but its content stays within its borders */ 
 
    border: 1px solid #000; 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="parent"> 
 
    <div id="X"><i class="fa fa-exclamation-triangle"></i></div> 
 
    <div id="Y">text goes here<br> 
 
     with some more<br>lines</div> 
 
</div>

Answer 2

これはアプローチです：

#X { 
 
    width:44px; 
 
    float:left; 
 
    border:1px solid black; 
 
} 
 
#Y { 
 
    width:auto; 
 
    overflow:hidden; 
 
    border:1px solid black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id='parent'> 
 
    <div id='X'><i class="fa fa-exclamation-triangle"></i></div> 
 
    <div id='Y'>text goes here</div> 
 
</div>