怎么把这3张图放在左边，3张放在右边？

Posted 2023-02-22

【中文标题】怎么把这3张图放在左边，3张放在右边？

【英文标题】：How to put these 3 pictures to the left and 3 pictures to the right?

【发布时间】：2019-04-05 05:28:04

【问题描述】：

我连续有 6 张图片，我想将 3 张放在左边，3 张放在右边。我尝试了 display: flex 和 float:left 但是它只是将部分选项卡下方的所有内容都提升了重叠显示。如何将 6 张图片一分为二，中间有文字？

<section className="open-text">
    <h1>
        <br/>
        <img className="move_to_left"     src= "images/FDAT.gif"/>
        <img className="move_to_left"     src= "images/usdaT.gif"/>
        <img className="move_to_left"     src= "images/dermT.png"/>
        ***String of Text***
        <img className="move_to_right"     src= "images/HypoT2.jpg"/>
        <img className="move_to_right"     src= "images/ssl.png"/>
        <img className="move_to_right"     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;*/

【问题讨论】：

这种结构对你想要的没有多大意义。你为什么不创建 3 列呢？为什么<h1> 里面的图片？

您想要垂直或水平堆叠 3 张图像的集合吗？

【参考方案1】：

最简单的方法是使用 inline-block display 属性。这是一个使用一些彩色 div 的示例，但它在您的图像上的效果是一样的。

display: inline-block;

JSFiddle：https://jsfiddle.net/chnbL179/

【讨论】：

这是一个 100% 宽度的大容器，而不是小容器。

【参考方案2】：

在 html 中使用 class="" 作为类名

这可以使用 flexbox 来完成，方法是让父项对齐中心项，然后将每个项设置为在 flex 框中相应地浮动， align-self : start 用于左侧， align-self:end;为正确的人。

这是我如何做到的一个例子：

.open-text 
  display:flex;
  align-items:center;
  justify-content:space-around;

.open-text h1 
color: #1e3a87;    
display: flex;
align-items: center;
font-family: 'Cinzel Decorative', cursive;
justify-content:space-around;

.open-text img 
margin:5px;

.open-text .move_to_left 
  align-self:start;

.open-text .move_to_right 
  align-self:end;

.open-text .string_of_text 
  align-self:center;

<section class="open-text">
    <h1>
        <br/>
        <img class="move_to_left"     src= "https://via.placeholder.com/70"/>
        <img class="move_to_left"     src= "https://via.placeholder.com/70"/>
        <img class="move_to_left"     src= "https://via.placeholder.com/70"/>
      <span class="string_of_text">***String of Text***</span>
        <img class="move_to_right"     src= "https://via.placeholder.com/70"/>
        <img class="move_to_right"     src= "https://via.placeholder.com/70"/>
        <img class="move_to_right"     src= "https://via.placeholder.com/70"/>        
        <br/>
    </h1>
</section>

【参考方案3】：

如果我正确理解您的问题，也许这对您有用？

请记住，我已将 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"     src= "https://via.placeholder.com/150"/>
        <img class="move_to_left"     src= "https://via.placeholder.com/150"/>
        <img class="move_to_left"     src= "https://via.placeholder.com/150"/>
        ***String of Text***
        <img class="move_to_right"     src= "https://via.placeholder.com/150"/>
        <img class="move_to_right"     src= "https://via.placeholder.com/150"/>
        <img class="move_to_right"     src= "https://via.placeholder.com/150"/>        
        <br/>
    </h1>
</section>