如何对齐两个div彼此相邻，第一个是固定宽度，第二个是动态高度

Question

我正试图为以下方案生成响应式css。我们有一个div容器（以后称为'父div /容器'）。在div里面是一个图标（由'X's'表示）和一个在div旁边的文本集合（由下面的'Y's'表示）。 'X'和'Y'容器都有边框。该图标宽度为44px，我们希望“Y”容器为剩余宽度的100％。如果屏幕被调整大小，'Y'容器会弯曲，根据需要占用（或删除）额外的线。如果文本太长而无法放在一行上，它会在自己的容器中打包。大致如下：

_____ ____________________ 
|XXXX| |YYYYYYYYYYYYYYYYYYY| <-Edge of screen 
|XXXX| |YYYYYYYYYYYYYYYYYYY| 
------ |YYYYYYYY   | 
     -------------------- 

我们已经尝试了很多方法，但我一直都不满意。我目前的尝试（有些简化）：

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

这项工作为一些我的要求，但如果文本溢出到多行“Y”集装箱的高度比父容器更大和重叠进一步内容在父容器下面。它也没有填充剩余的宽度。

我想找到一个更优雅的CSS的唯一解决方案。任何帮助感谢！

编辑：HTML看起来像这样：

<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>