【发布时间】：2021-09-02 11:20:52
【问题描述】：
我正在开发一个网站。
我有一个容器，它有两列。在左侧，我有一张产品图片，当您将鼠标悬停在它上面时，它会显示该产品正在使用中。
在右边，我有一个标题、描述、技术图纸。
我希望当屏幕调整为移动格式时，或者即使浏览器缩小，列也会堆叠在一起。
现在图像越来越小，直到你看不到它。
我尝试了几次使用 FlexBox。没有任何运气。这是我遵循的指南/规则：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这是我编造的一个快速 JSfiddle，看看我在说什么。这里面没有任何“尝试”代码。只是包含 div、左列和右列的基本代码，以及一些示例图像和文本。 https://jsfiddle.net/fmcdLxa4/1/
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
padding: 15px;
}
/* Columns */
.left-column {
float: left;
width: 50%;
padding: 10px;
position: relative;
border-bottom: 1px solid #E1E8EE;
}
.right-column {
float: left;
width: 50%;
padding: 10px;
}
/* Left Column */
.left-column img {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: auto;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
.product-description a {
color: #358ED7;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: transparent;
}
.flip-box-back {
background-color: transparent;
transform: rotateY(180deg);
}<div class="container">
<!-- Left Column -->
<div class="left-column">
<p> </p>
<div height="15"></div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" style="max-width: 100%">
</div>
<div class="flip-box-back">
<img src="http://www.deepdiveintel.com/wp-content/uploads/2013/09/Owl-Eye-art-300x300.jpg" style="max-width: 100%">
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Lorem ipsum dolor sit amet</span>
<h1>Lorem ipsum dolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sem, bibendum id tellus ac, aliquam faucibus massa. Nulla facilisi. Fusce vel condimentum velit. Praesent nec ultricies erat. Sed ante lectus, ultrices ut laoreet id, tincidunt
a augue.</p>
<p>Technical drawings: <a href="" target="_blank" style="font-size: 15px" ;>6/8</a> | <a href="" target="_blank" style="font-size: 15px">7/0</a> | <a href="" target="_blank" style="font-size: 15px">8/0</a>
<p />
</div>
</div>
</div>任何帮助都会很棒！
【问题讨论】：
-
欢迎来到 Stack Overflow！您不需要在任何元素上使用
float，因为您使用flex作为父容器。此外，您需要使用@media查询。 -
使用@media 查询，根据您希望限制在列中的宽度。在媒体查询中将
flex和flex-direction: column添加到您的.container -
谢谢大家！我正在尝试低于 600 像素的媒体查询，但无法正常工作。我对它们进行了更多研究。感谢您抽出宝贵时间发表评论！