如何在弹性行中排列图像和文本？

Question

我正在尝试缩小图像和右侧带有文本的列。同时。此时，只有文本在缩小，直到两列的屏幕都变小了。

这是我第一次在整个网站上使用 flex，所以我遗漏了一些你猜的概念。

想法是让图像和文本始终具有相同的宽度。

此版本仅适用于台式机和平板电脑屏幕。 movil版本将传送另一个内容。

.twoColumns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  width: 600px;
  max-width: 100%;
  margin-left: 28px;
}

<div class="twoColumns">
  <img src="https://dummyimage.com/600x400/000/fff" class="responsive" width="600">
  <div class="right" class="responsive">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

Answer 1

删除所有固定宽度并将图像嵌套在 div。

.twoColumns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  max-width: 100%;
  margin-left: 28px;
}

<div class="twoColumns">
  <div class="left">
    <img src="https://dummyimage.com/600x400/000/fff" class="responsive">
  </div>
  <div class="right" class="responsive">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

Answer 2

您的两个 max-width 干扰了 flex 算法。在 flex children 上使用内置的 flex shorthand 告诉它们以 1 的速率增长，以 1 的速率收缩，并从 parent 的 [=50% 开始=48=]分别.

我在 children 上添加了 50% 的 max-width 以在非常小的宽度上缩小图像。

与 margin-left.

相比，您可能更喜欢使用现代间隙属性来表示 flex/grid 的间隙

调整大小、溢出和背景颜色仅适用于此演示。

编辑：您可能还想为非常小的宽度添加一个 word-break，因为您的单词太长而无法容纳。

.twoColumns {
  display: flex;
  gap: 28px;
  flex-direction: row;
  justify-content: space-between;
  resize: both;
  overflow: auto;
  background-color: #eee;
}

.responsive,
.right {
  max-width: 50%;
  flex: 1 1 50%;
  word-break: break-word;
}

<div class="twoColumns">
  <img src="https://source.unsplash.com/random/200x200" class="responsive">
  <div class="right" class="responsive">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

您也可以使用 CSS 网格：

.twoColumns {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  resize: both;
  overflow: auto;
  background-color: #eee;
}

.responsive {
  width: 100%;
  word-break: break-word;
}

.right {
  background-color: skyblue;
}

<div class="twoColumns">
  <img src="https://source.unsplash.com/random/200x200" class="responsive left">
  <div class="responsive right">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

Answer 3

我想你可能需要这样的东西：

.left {
  flex: 50%;
}

.right {
  flex: 50%;
  width: 600px;
  max-width: 100%;
  margin-left: 28px;
}

<div class="twoColumns">
  <div class="left">
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNoYW5nZXxlbnwwfHwwfHw%3D&w=1000&q=80" class="responsive" width="600">
  </div>
  <div class="right" class="responsive">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

Answer 4

.section1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  width: 100%;
  margin-left: 20px;
  display: flex;
  align-items: center;
}

<div class="section1">
      <div class="left">
        <img src="https://dummyimage.com/600x400/000/fff"              class="responsive">
      </div>
      <div class="right" class="responsive">
 an open platform for founders to connect, launch ideas/products, find recommended
      </div>
    </div>

如何在弹性行中排列图像和文本？

How can I arrange an image and text in a flex row?

html

css

flexbox

responsive