javascript - 怎么把这3张图放在左边,3张放在右边?
问题描述
我连续有 6 张图片,我想将 3 张放在左边,3 张放在右边。我尝试了 display: flex 和 float:left 但是它只是将部分选项卡下方的所有内容都提升了重叠显示。如何将 6 张图片分成两半,中间有文字?
<section className="open-text">
<h1>
<br/>
<img className="move_to_left" height="70" width="70" alt="usda_icon" src= "images/FDAT.gif"/>
<img className="move_to_left" height="70" width="70" alt="usda_icon" src= "images/usdaT.gif"/>
<img className="move_to_left" height="80" width="80" alt="usda_icon" src= "images/dermT.png"/>
***String of Text***
<img className="move_to_right" height="90" width="90" alt="usda_icon" src= "images/HypoT2.jpg"/>
<img className="move_to_right" height="100" width="100" alt="usda_icon" src= "images/ssl.png"/>
<img className="move_to_right" height="80" width="80" alt="usda_icon" src= "images/para2.gif"/>
<br/>
</h1>
</section>
CSS
.open-text > h1 {
color: #1e3a87;
border-top: 1px solid white;
margin-top: 12.5px !important;
height: 10rem;
display: flex !important;
align-items: center !important;
mix-blend-mode: color-burn;
display: flex !important;
align-items: center !important;
font-family: 'Cinzel Decorative', cursive;
}
.open-text > h1 {
/*border: 4px solid red;*/
/*display: flex;*/
/*justify-content: space-around;*/
/*float: left;*/
}
.open-text > h1:nth-child(odd) {
border: 1px solid red;
/*float: right;*/
}
解决方案
如果我正确理解您的问题,也许这对您有用?
请记住,我已经替换className
为,class
以便下面的示例可以正常工作 - 如果您通过 JSX 呈现它,请记住恢复它:
.open-text > h1 {
height: 10rem;
align-items: center;
justify-content:center; /* Cause "vertical" center alignment */
flex-direction:row; /* Spread children of h1 along the x-axis */
display: flex;
}
.open-text > h1 > img {
flex:1; /* This causes the image elements to squish down so that
text comfortably fits */
}
<section class="open-text">
<h1>
<img class="move_to_left" height="70" width="70" alt="usda_icon" src= "https://via.placeholder.com/150"/>
<img class="move_to_left" height="70" width="70" alt="usda_icon" src= "https://via.placeholder.com/150"/>
<img class="move_to_left" height="80" width="80" alt="usda_icon" src= "https://via.placeholder.com/150"/>
***String of Text***
<img class="move_to_right" height="90" width="90" alt="usda_icon" src= "https://via.placeholder.com/150"/>
<img class="move_to_right" height="100" width="100" alt="usda_icon" src= "https://via.placeholder.com/150"/>
<img class="move_to_right" height="80" width="80" alt="usda_icon" src= "https://via.placeholder.com/150"/>
<br/>
</h1>
</section>
推荐阅读
- wildcard - AEM 6.4:在过滤器定义中使用通配符
- julia - Julia 的微分方程步长控制
- sql - 表分区 - 保留基本和分区孩子?
- jdbc - 将 Google 表单数据复制到 Cloud SQL
- typescript - 无需导入即可使用类型和接口
- javascript - 覆盖在不同文件中为 Mocha 声明的模拟对象
- asp.net-mvc - 剑道编辑器需要从数据库/本地文件夹中显示图像
- unity3d - 对在游戏过程中只有一侧可见的 2d 纹理使用四边形而不是精灵?
- node.js - 在 Netlify 上设置 Mailjet lambda
- nginx - 在入口处设置 nginx 限制请求突发数