我试图同时缩小图片和右边文本所在的列。此时,只有文本在缩小,直到屏幕对两列都太小。
这是我第一次在整个网站上使用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>
4条答案
按热度按时间dy1byipe1#
删除所有固定宽度并将图像嵌套在div中。
b5lpy0ml2#
您的两个
max-width
干扰了flex算法。请在flex子级上使用内置的flex速记,告诉它们以1的速率增长,以1的速率收缩,并分别从父级空间的50%开始。我还在孩子身上添加了50%的最大宽度,以便在非常小的宽度上缩小图像。
与使用左边距相比,您可能更喜欢使用现代的gap属性来处理带有flex/grid的间隙。
调整大小,溢出和背景色只是为了这个演示。
编辑:您可能还想为非常小的宽度添加一个
word-break
,因为您的单词太长而无法容纳。您也可以使用CSS网格:
一个二个一个一个
zdwk9cvp3#
我想你可能需要这样的东西:
stszievb4#