其他分享
首页 > 其他分享> > display: flex，弹性布局

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>

 

标签：flex,这是,布局,100px,弹性,display,描述
来源： https://www.cnblogs.com/sunshine-wy/p/16612106.html