如何让我的 2x1 表格产品描述垂直显示在移动设备上？移动响应

Question

I want to show my product description like this:我想像这样显示我的产品描述：

在此处输入图片说明

Answer 1

Try this试试这个

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<style type="text/css">
    .list-item{
        display: flex;
        flex-direction: row;
    }
    .list-item-img{
        width: 25%;
        height: 200px;
    }
    .list-item-img img{
        width: 100%;
        height: 100%;
        max-width: 100%;
    }
    .list-item-c{
        width: 75%;
        padding-left: 10px;
    }
    .list-item-about{
        font-size: 14px;
    }
    .list-item-title{
        font-size: 16px;
        font-weight: 650;
    }
    @media (max-width: 700px){
    .list-item-c{
        width: 100%;
    }
    .list-item-img{
        width: 100%;
    }
    .list-item{
        display: flex;
        flex-direction: column;
    }
}
</style>
<body>
    <div class="main-div">
        <div class="list-item">
            <div class="list-item-img">
                <img src="https://images.unsplash.com/photo-1508919801845-fc2ae1bc2a28?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aW1nfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80">
            </div>
            <div class="list-item-c">
                <p class="list-item-title">your title</p>
                <p class="list-item-about">about item...</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

Alternative method using css grid使用css网格的替代方法

<div class="container">
  <div class="item1"><img src="https://images.unsplash.com/photo-1626677381009-ac05aecb0b7d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80"></div>
  <div class="item2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
</div>

<style>


@media (min-width: 56.25em){

.container {
 display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  align-items: center;
grid-auto-flow: column;

}


.item2 {
  grid-column-start:2;
  grid-column-end:3;
}

.item1 {
  grid-column-start:1;
 grid-column-end: 1;
}
}

img{
  width:100%;
}
</style>

如何让我的 2x1 表格产品描述垂直显示在移动设备上？移动响应

问题描述

2 个解决方案

解决方案1
0 2021-07-19 16:00:27

解决方案2
0 2021-07-19 16:44:22

如何让我的 2x1 表格产品描述垂直显示在移动设备上？ 移动响应

问题描述

2 个解决方案

解决方案1 0 2021-07-19 16:00:27

解决方案2 0 2021-07-19 16:44:22

如何让我的 2x1 表格产品描述垂直显示在移动设备上？移动响应

解决方案1
0 2021-07-19 16:00:27

解决方案2
0 2021-07-19 16:44:22