display: flex，弹性布局

　　实现一个商品详情的布局效果，左边图片右边文字标题和描述，采用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>

 

posted @ 2022-08-22 10:53  顾星河  阅读(48)  评论(0)  编辑  收藏  举报