将 2 个项目并排放置流体/响应（未知宽度）

Question

我在工作中从事一个 React 项目（我们公司为我们提供了全栈职位）。

我有一个包装器div，里面还有另外两个divs。

下面是 div 的作用：

1. Left Div -（文本span，还包含省略号和隐藏溢出，变量div 宽度）因此父div 的宽度必须适合文本内容。
2. Right Div - （排序图标），排序图标必须贴在左侧div 的右侧并填充parent div 的其余空间，尽管该图标必须贴在标题文本旁边一直 [缩放友好]。

这是我想要的图片：

这就是我所拥有的：

这是我的 HTML：

return (
    <>
        <div className={classes.headerWithSort}>
            <span>{col.label}</span>
            {canSort ? (
                <div>{sortIcon}</div>
            ) : null}
        </div>
    </>
);

这是我的 JSX/CSS：

headerWithSort: {
    position: 'relative',
    border: '1px dashed black',
    height: 'inherit',
    width: 'inherit',
    '& > span': {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        lineHeight: '3.29rem',
        border: '1px dashed green',
        float: 'left'
    },
    '& > div': {
        border: '1px dashed red',   
        overflow: 'hidden'
    },
    '& > *': {
        height: 'inherit'
    }
},

[编辑] - 我想要的另一个例子：

我在这个问题上卡了很长时间，希望能得到任何帮助，谢谢。

Answer 1

我建议将 Bootstrap CDN 添加到您的项目中：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>

<!-- Popper JS -->
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> 
</script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> 
</script>

然后您可以创建 2 列（左一小，右一大）并将您的内容插入其中：

<div class="container">
 <div class="row">
   <div class="col-sm-5">
     <h3>Elipses text</h3>
     <p>Lorem ipsum dolor..</p>
   </div>
   <div class="col-sm-7">
     <h3>icon</h3>
     <img/>
   </div>
 </div>
</div>

Bootstrap 列总是分为 12 列，因此如果将列数相加，则应该得到 12，如果您希望列的大小相同且页面的一半，则两者都使用“col-sm-6”。这对于您的缩放场景非常有用，再加上您不会出错的媒体查询。

了解 Bootstrap 确实是学习响应式和快速网页设计的最佳方式之一。