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

flmtquvp  于 2023-02-01  发布在  其他
关注(0)|答案(4)|浏览(129)

我试图同时缩小图片和右边文本所在的列。此时,只有文本在缩小,直到屏幕对两列都太小。
这是我第一次在整个网站上使用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>
dy1byipe

dy1byipe1#

删除所有固定宽度并将图像嵌套在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">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>
b5lpy0ml

b5lpy0ml2#

您的两个max-width干扰了flex算法。请在flex子级上使用内置的flex速记,告诉它们以1的速率增长,以1的速率收缩,并分别从父级空间的50%开始。
我还在孩子身上添加了50%的最大宽度,以便在非常小的宽度上缩小图像。
与使用左边距相比,您可能更喜欢使用现代的gap属性来处理带有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网格:
一个二个一个一个

zdwk9cvp

zdwk9cvp3#

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

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

stszievb4#

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

相关问题