css中固定两个左对齐列的最佳方法是什么？答案

【问题标题】：What is the best way in css to have two left aligned columns where first is fixed?css中固定两个左对齐列的最佳方法是什么？
【发布时间】：2018-12-26 18:48:41
【问题描述】：

我想要两列，其中第一列是图像，第二列是文本。如果可能，我想避免使用 html 表格。我希望第二列的文本左对齐，以便它与图像对齐并转到页面宽度的其余部分

我发现我可以为第一列做这样的事情：

 #left_col {
       float:left;
        width: 650px;
    }

但无法找出第二个正确的 css（我在网上看到的所有示例都右列右对齐）。在 CSS 中，有两列的最佳方式是什么，第一列是固定的，第二列是左对齐（图片的右侧）？

【问题讨论】：

标签： html css css-tables

【解决方案1】：

你可以试试类似的东西；

#image, #text{
    position: absolute;
}
#image {
    top: 0;
    width: 650px;
}
#text {
    top: 0;
    left: 650px;
    right: 0;
}

Here 是一个工作小提琴。

【讨论】：

【解决方案2】：

您的 2 列将具有完全相同的 CSS，其中宽度是总宽度的一半。这是一个基本的网格布局，如果您想进一步研究它:)

【讨论】：

我不希望它是总宽度的 1/2。我希望第一个 col 是固定的，第二个 col 是其他所有内容
如果第一列是固定的，那么你应该知道第二列的宽度，是吗？还是浏览器窗口的宽度？
如果是这种情况，只需去掉宽度 - 只需 float:left，div 将自动成为内容的宽度。
另一个选项，其中 div 填充整个空间是使用：margin-left:100px;宽度：100%

【解决方案3】：

勾选http://jsfiddle.net/EyKZ7/，将第二列width保留为默认auto，它将占用剩余空间

【讨论】：

【解决方案4】：

如果我没听错的话……

HTML

<div id="left_col">
    Content
</div>
<div id="main">
    Content
</div>

CSS

#left_col {
    float: left;
    width: 650px;
}

#main {
    margin-left: 650px;
}

演示

JSFiddle

【讨论】：

我希望第二列是 apge 的其余部分（不固定在 650 像素）