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;
}

非常感谢你的帮助。我尝试使用内联块和相对/绝对来浮动它。

Answer 1

如果我理解你的问题，你想在文字和图片之间有一个固定的宽度吗？任何额外的空间均匀地扩散到两侧？

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这就像你想要实现的那样吗？

.pic {
  max-width: 100%;
  margin: 0;
  padding: 0;

}
.group {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.group > * {
  display: table-cell;
  vertical-align: top;
}

.group .f {
  width: 300px;
}

<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="http://lorempixel.com/output/people-q-c-640-480-6.jpg" />
</div>

两列布局，列之间有固定边距，一列流体，一个是固定的？

2 个答案: