Question

我正在尝试创建一个由3列组成的简单元素，3.列为icon-image。我希望元素具有响应性，但icon-image应始终具有相同的大小（例如40x40像素）。因此，1.和2.列应具有％值，3.列应具有宽度40px。我不希望icon-image在较小的屏幕上调整大小。图标的宽度应始终为40px。

.container {
  width: 80%;
}

.text1 {
  float: left;
  width: 30%;
}

.text2 {
  float: left;
  width: 50%;
}

.image {
  float: right;
  width: 120px;
}

<div class="container">

  <p class="text1">Some Titel</p>

  <h3 class="text2">Some Text and some more text...</h3>

  <img src="image1.jpeg" alt="" class="image" />

</div>

https://jsfiddle.net/mkrizanek/usfmk6r7

亲切的问候，米兰

Answer 1

你最好的选择可能是使用flex。

设置＆＃34;显示：flex;辩解内容：空间 - 内容＆＃34;在容器div上，＆＃34; flex：1;＆＃34;在每个你想要响应的部分。

如果您希望第二个div中的文本一直推送到图像，您还可以添加＆＃34; text-align：right;＆＃34;它。

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
}

.text1 {
  flex: 1;
}

.text2 {
  flex: 1;
}

.image {
  width: 40px;
  height: 40px;
  background: #088;
}

＆＃13;

<div class="container">

  <p class="text1">Some Title</p>

  <h3 class="text2">Some Text and some more text...</h3>

  <img alt="" class="image" />

</div>

＆＃13;

这是flexbox的一个很好的资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

Answer 2

我已经用 HTML 和 CSS 进行了一些调整。但我希望你能得到逻辑。我已将height:auto的{{1}}更改为display-type。您可以根据需要更改容器内的container元素。

flex

with

响应式3列布局，第三列具有固定大小

2 个答案: