三列布局，列宽基于内容，最后一列占用可用空间

Question

尝试实现一些我认为在 HTML/CSS 中应该非常简单的东西，尽管不断碰壁以获得所需的布局。

基本上，我将三部分内容放入三列布局中，我希望它显示为一个连续的句子，中间有一个图像。文本长度和图像大小会有所不同，我的目标是根据其内容制作前两列的宽度，然后是最后一列占用剩余空间，以便文本中断。

下面是显示示例布局的图表。

以及每个部分应如何响应不同大小的图像的示例： xd.adobe.com/view/9a63781a-2514-4d75-926f-429d287c5f4e-cf30

像这样：

1. 短文本（基于文本长度的列宽）
2. 横向或纵向图片（图片大小在 CSS 中设置，列宽基于图片宽度）
3. 较长的文本（列宽填充前两列剩余的可用空间）

这是我的小提琴和代码： https://jsfiddle.net/2020_RG/a10k5tf7/

HTML：

    <div id="container">            
        
            <span class="part_one">Some text, column accommodates text length,</span>
                    
            <span class="part_two">
                <img src="https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg"><span class="comma">,</span>      
            </span>
                    
            <span class="part_three">This section will only have text and fill available space left by previous text length and image width.  Positioned aligned to bottom of image, regardless of image height. All lines overflow and break like this when the text is long.</span>

    </div> 

CSS：

    #container {
        width: 97%;
        margin: 1rem 1.4rem; 
    }
    
    .part_one {
      vertical-align: top; 
    }
    
    .part_two {
      margin: 0.3vw 0.2vw 0 0.1vw;
    }
    
    .part_two img {
      max-width: 46%;
    }
    
    .comma {
        margin: 0 0.4vw;
    }

最后一列似乎没有按预期中断，而是运行到图像下方的下一行。

也许将它分组到一个列或表中是最好的，尽管如何保持第三列的宽度占用可用空间并定位在图像之外......一些天才的 flex 系统？

Answer 1

CSS-Grid 可以做到这一点。 [查看全屏]

当然，这不是响应式的，因为图像宽度是自动的，因此不会调整到屏幕尺寸（除非您愿意，这是另一个问题）。

#container {
  width: 97%;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: max-content auto 1fr;
}

.part_one {
  vertical-align: top;
}

.part_two {
  margin: 0.3vw 0.2vw 0 0.1vw;
}

.part_two img {
}

.part_three {
  grid-row: 2;
  grid-column: 3;
}

<div id="container">            
    
        <span class="part_one">Some text, column accommodates text length,</span>
                
        <span class="part_two">
            <img src="http://www.fillmurray.com/284/196"><span class="comma">,</span>      
        </span>
                
        <span class="part_three">This section will only have text and fill available space left by previous text length and image width.  Positioned aligned to bottom of image, regardless of image height. All lines overflow and break like this when the text is long.</span>

</div>