三列布局，列宽基于内容，最后一列可用 space

Question

尝试实现一些我认为在 HTML/CSS 中应该非常简单的事情，尽管将运行固定在墙上以获得所需的布局。

基本上，我要将三部分内容放入三列布局中，我希望它显示为中间有图像的连续句子。文本长度和图像大小会有所不同，我的目标是根据内容调整前两列的宽度，然后最后一列向左 space，这样文本就会中断。

下图显示了示例布局。

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

像这样：

短文本（列宽基于文本长度）
横向或纵向图片（图片大小在 CSS 中设置，列宽基于图片宽度）
更长的文本（可用列宽填充 space 从前两列开始）

这是我的 fiddle 和代码： 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;
    }

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

也许将其分组为一列或 table 是最好的，尽管如何保持第三列的宽度占用可用的 space 并定位在图像之外......一些天才的 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>

三列布局，列宽基于内容，最后一列可用 space

Three column layout, column width based on content, last column takes available space

html

css

multiple-columns

flexbox