左右对齐图像

Question

在SO上找不到任何答案。我想列出我在左右获得的图像。图像将没有固定的尺寸。我不知道这是否是正确的方法。我的html文件如下所示：

<div class="six">
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>

            <div align="center">
                <h1>Pictures</h1>
                <input type="text" id="gif">
                <button id="sbmt">Submit</button>
                <img src=""  width=250/>
            <div>

        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
    </div>

我当前的css文件如下：

.left{
    align-content: left;
    width:fit-content
  }

.right{
    align-content: right;
    width: fit-content;
}

上面的代码尝试组织如下图像。但是，显然我在做错。我搜索了大约一个小时，然后尝试了各种“ SO技巧”。只是行不通。

Answer 1

我会在这个上使用flexbox。您可以使用它，然后将图像插入六个div中的每个div中：

.flex-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-row {
    flex-direction: row;
    display: flex;
    align-items: center;
    text-align: center;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 500px;
}

<div class="flex-body">
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </div>
  <div class="flex-row">
    <div style="background: #fff;">
      <h1>Pictures</h1>
        <input type="text" id="gif">
        <button id="sbmt">Submit</button>
        <img src="" width="250px"/>
    </div>
  </div>
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </div>
</div>