html - 列之间固定边距的两列布局和一列流体，一个固定？

Question

我是 html/css 的新手，我很难尝试设置一个两列设计，其中左列是一列固定宽度为 300px 的文本，右列是一张宽度为屏幕的 40%。此外，这就是我被挂断的地方，即使在不同的屏幕尺寸下，两列之间也应始终保持固定的边距。我想要它，所以任何超出文本列占用的 300px 的屏幕宽度和照片占用的 40% 的屏幕都均匀分布到屏幕的左右边缘，而不是在两列之间.目前，当我展开屏幕时，所有多余的空间都会进入两列之间(虽然我希望它们之间有一个固定的边距，而多余的空间会到达边缘)。最好的方法是什么？

我尝试了几种不同的方法，但这是我得到的最接近的代码:

<div class="group">
         <div class="f">
           <h1> Header Here</h1>
           <p>Paragraph with text here. Paragraph with text here.</p>
         </div>
         <img class="pic" src="img/picture.jpg"/>
 </div>

.pic {
  width: 40%;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.f {
  float: left;
  margin: 0;
  padding: 0;
  width: 300px;
  text-align: justify;
  display: inline-block;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

非常感谢您的帮助。我试过使用内联 block 和相对/绝对 float 它。

Answer 1

如果我没有正确理解你的问题，你想要文本和图片之间的固定宽度吗？有没有多余的空间均匀分布到两侧？

* {
    margin: 0;
    padding: 0;
    text-align: center;
}
.group {
    display: flex;
    justify-content: center;
}
.f {
    width: 300px;
    height: 200px;
    border: 1px solid black;
}
.middle {
    width: 10%;
}
.pic {
    width: 40%;
    height: 200px;
    background-color: green;
}

<div class="group">
    <div class="f">
        fixed width: 300px;
    </div>
    <div class="middle">
        fixed width: 10%;
    </div>
    <div class="pic">
        fixed width: 40%;
    </div>
 </div>