尝试在侧边栏旁边对齐图像答案

【问题标题】：try to align images right next to a sidebar尝试在侧边栏旁边对齐图像
【发布时间】：2021-02-10 16:17:51
【问题描述】：

this the image I'm trying to recreate 我正在尝试将两（2）张堆叠的图像彼此相邻放置，并使整个三（3）张图像也像上图一样在侧边栏表格旁边对齐，但每次我总是尝试位于侧边栏表格下方。我尝试过使用 flexbox，但它不起作用，也许我不太了解它。请如果有人可以提供帮助。谢谢

<div class="table">
    <table>
        <tr>
            <th class="cat">Categories</th>
        </tr>
        <tr>
            <th>Electronics</th>
        </tr>
        <tr>
            <th>Clothing</th>
        </tr>
        <tr>
            <th>Music & Equipment</th>
        </tr>
        <tr>
            <th>Footwear</th>
        </tr>
        <tr>
            <th>Software Products</th>
        </tr>
        <tr>
            <th>Computer Hardware</th>
        </tr>
        <tr>
            <th>Mobile Phones</th>
        </tr>
        <tr>
            <th>Laptops</th>
        </tr>
        <tr>
            <th>Furniture</th>
        </tr>
        <tr>
            <th>Beauty Products</th>
        </tr>
        <tr>
            <th>Computer Accessories</th>
        </tr>
    </table>
</div>

<div class="holder">
    <div class="lone-image"> </div>
    <div class="stacked-image">
        <div class="canon"></div>
        <div class="dell"></div>
    </div>
</div>

CSS 代码

.table {
    display: flex;
    flex - flow: column;
    border: 1px solid #999696;
    width: 25%;
    height: 60%;
    box-sizing: border-box;
}
table, th, td{
    border-bottom:1px solid black; 
    text-align: left;
    padding: 10px;
}

.cat{
    background-color:rgb(0, 0, 107);
    color: white;
    border-radius: 4px;
}
.holder{
    display: flex;
    justify-content: center;
    align-items: center;
}
.lone-image{
    background-image: url(xii.jpg);
    background-size: cover;
    width: 35%;
    height: 410px;
}
.stacked-image{
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 40%;
    margin: 4px;
}
.canon{
    background-size: cover;
    background-image: url(canon.jpg);
    width: 65%;
    height: 400px;
    margin-bottom: 4px;
}
.dell{
    background-size: cover;
    background-image: url(dell.jpg);
    width: 65%;
    height: 400px;
}

【问题讨论】：

标签： html css layout

【解决方案1】：

我想出了这个。您可以尝试使用宽度和其他样式，但这应该会给您基本的想法。

此外，使用表格是一种不好的做法，因为它们不提供响应。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

  </style>
</head>

<body>
  <table>
    <tr>
      <td>
        <div id="1table">
          <table border="1">
            <tr>
              <th class="cat">Categories</th>
            </tr>
            <tr>
              <th>Electronics</th>
            </tr>
            <tr>
              <th>Clothing</th>
            </tr>
            <tr>
              <th>Music & Equipment</th>
            </tr>
            <tr>
              <th>Footwear</th>
            </tr>
            <tr>
              <th>Software Products</th>
            </tr>
            <tr>
              <th>Computer Hardware</th>
            </tr>
            <tr>
              <th>Mobile Phones</th>
            </tr>
            <tr>
              <th>Laptops</th>
            </tr>
            <tr>
              <th>Furniture</th>
            </tr>
            <tr>
              <th>Beauty Products</th>
            </tr>
            <tr>
              <th>Computer Accessories</th>
            </tr>
          </table>
        </div>
      </td>
      <td>
        <table>
          <tr>
            <td rowspan="2"><img src="https://i.imgur.com/JeXUv8x.png" style="height:290px"></td>
            <td colspan="2"><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
          </tr>
          <tr>
            <td><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
          </tr>
          <tr>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <div class="holder">
    <div class="lone-image"> </div>
    <div class="stacked-image">
      <div class="canon"></div>
      <div class="dell"></div>
    </div>
  </div>
</body>

</html>

祝你有美好的一天！

【讨论】：

【解决方案2】：

我认为他们在您为每个div 选择的width 和height 中存在一些错误。我更改了它并删除了一些额外的flex 属性，仅此而已。告诉我你想要这样的东西。

建议的代码

.container{
  display:flex;
  width:100%;
  height:60%;
}
.table{
  display: flex;
  flex-flow: column;
  border: 1px solid #999696;
  width: 25%;
  height: 100%;
  box-sizing: border-box;
}
table, th, td{
  border-bottom:1px solid black; 
  text-align: left;
  padding: 10px;
}
.cat{
  background-color:rgb(0, 0, 107);
  color: white;
  border-radius: 4px;
}
.holder{
  width:100%;
  display: flex;
  flex-direction:row;
}
.lone-image{
  background:blue;
  width:60%;
  height: 100%;
}
.stacked-image{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 40%;
}
.canon{
  width: 100%;
  background:green;
  height:50%;
}
.dell{
  background:red;
  width: 100%;
  height: 50%;
}

<div class="container">
  <div class="table">
    <table>
      <tr>
        <th class="cat"> Categories</th>
      </tr>
      <tr>
        <th> Electronics</th>
      </tr>
      <tr>
        <th>Clothing</th>
      </tr>
      <tr>
        <th> Music & Equipment</th>
      </tr>
      <tr>
        <th> Footwear</th>
      </tr>
      <tr>
        <th> Software Products</th>
      </tr>
      <tr>
        <th> Computer Hardware</th>
      </tr>
      <tr>
        <th> Mobile Phones</th>
      </tr>
      <tr>
        <th> Laptops</th>
      </tr>
      <tr>
        <th> Furniture</th>
      </tr>
      <tr>
        <th> Beauty Products</th>
      </tr>
      <tr>
        <th> Computer Accessories</th>
      </tr>
    </table>
  </div>
  <div class="holder">
    <div class="lone-image">
    </div>
    <div class="stacked-image">
      <div class="canon"></div>
      <div class="dell"></div>
    </div>
  </div>
</div>

你的方向是正确的

请告诉我是否有任何帮助:)

【讨论】：

非常感谢，但有一个小问题。我希望单独的图像和堆叠的图像彼此间隔开。应该使用 ,argin 是一个很好的做法
我建议使用padding 而不是margin，因为边距会在div 之外增加空间，从而增加所需的height & width。