Html 尝试将图像与侧边栏对齐

我试图将两（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>

我想到了这个。 你可以玩转宽度和其他样式，但这应该给你一个基本的想法

此外，使用表是一种糟糕的做法，因为它们没有响应能力

类别
数码产品
服装
音乐与设备
鞋类
软件产品
计算机硬件
手机
笔记本电脑
家具
美容产品
电脑配件

我想到了这个。 你可以玩转宽度和其他样式，但这应该给你一个基本的想法

此外，使用表是一种糟糕的做法，因为它们没有响应能力

类别
数码产品
服装
音乐与设备
鞋类
软件产品
计算机硬件
手机
笔记本电脑
家具
美容产品
电脑配件

我认为他们的错误在于您为每个

分区选择的
宽度
和
高度
。我改变了这一点，删除了一点额外的
flex
属性，就这样告诉我你想要这样的东西

建议代码

.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;
}


.container{
显示器：flex；
宽度：100%；
身高：60%；
}
.桌子{
显示器：flex；
柔性流动：柱；
边框：1px实心#999696；
宽度：25%；
身高：100%；
框大小：边框框；
}
表，th，td{
边框底部：1px纯黑；
文本对齐：左对齐；
填充：10px；
}
猫先生{
背景色：rgb（0,0,107）；
颜色：白色；
边界半径：4px；
}
.持有人{
宽度：100%；
显示器：flex；
弯曲方向：行；
}
.孤独的形象{
背景：蓝色；
宽度：60%；
身高：100%；
}
.堆叠图像{
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：40%；
}
佳能先生{
宽度：100%；
背景：绿色；
身高：50%；
}
戴尔先生{
背景：红色；
宽度：100%；
身高：50%；
}

类别
数码产品
服装
音乐与设备
鞋类
软件产品
计算机硬件
手机
笔记本电脑
家具
美容产品
电脑配件
我认为他们的错误在于您为每个
分区选择的
宽度
和
高度
。我改变了这一点，删除了一点额外的
flex
属性，就这样告诉我你想要这样的东西

建议代码

.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;
}


.container{
显示器：flex；
宽度：100%；
身高：60%；
}
.桌子{
显示器：flex；
柔性流动：柱；
边框：1px实心#999696；
宽度：25%；
身高：100%；
框大小：边框框；
}
表，th，td{
边框底部：1px纯黑；
文本对齐：左对齐；
填充：10px；
}
猫先生{
背景色：rgb（0,0,107）；
颜色：白色；
边界半径：4px；
}
.持有人{
宽度：100%；
显示器：flex；
弯曲方向：行；
}
.孤独的形象{
背景：蓝色；
宽度：60%；
身高：100%；
}
.堆叠图像{
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：40%；
}
佳能先生{
宽度：100%；
背景：绿色；
身高：50%；
}
戴尔先生{
背景：红色；
宽度：100%；
身高：50%；
}

类别
数码产品
服装
音乐与设备
鞋类
软件产品
计算机硬件
手机
笔记本电脑
家具
美容产品
电脑配件
非常感谢，但有一个小问题。我希望单独的图像和堆叠的图像彼此隔开。如果使用，精氨酸是一种很好的做法。我建议使用
填充
而不是
边距
，因为边距会在div之外增加空间，从而增加所需的
hei