实现一个商品详情的布局效果，左边图片右边文字标题和描述，采用display: flex，弹性布局，code如下：
<html>
<head>
<title>我的第一个 HTML 页面</title>
<style>
.list {
display: flex;
}
.info{
display: flex;
flex-direction: column;
margin-left: 10px;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="list">
<img src="https://img2.baidu.com/it/u=1676260117,857699567&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" />
<div class="info">
<span>这是标题</span>
<span>这是描述</span>
<span>这是描述</span>
<span>这是描述</span>
</div>
</div>
</body>
</html>
标签：flex,布局,100px,弹性,display,描述 From： https://www.cnblogs.com/sunshine-wy/p/16612106.html