Html 如何在li元素中设计css div列表？_Html_Css

Html 如何在li元素中设计css div列表？

html css

Html 如何在li元素中设计css div列表？,html,css,Html,Css,我想设计一个css设计，如下图所示乱数假文 EXDKKS 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书乱数假文 EXDKKS 自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书但是我无法设置div position属性以下是使用flex的示例： HTML: <div class="search-lis

我想设计一个css设计，如下图所示




乱数假文
EXDKKS
自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书


乱数假文
EXDKKS
自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书

但是我无法设置div position属性

以下是使用flex的示例：

HTML:

  <div class="search-list">
    <ul>
      <li>
        <div class="search-item">
          <div class="left">
            <img src="https://openlayers.org/en/latest/examples/data/icon.png"/>
          </div>
          <div class="right">
            <div class="info">
              <div class="type">Lorem Ipsum</div>
              <div class="id">EXDKKS</div>
            </div>
            <div class="name">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div>            
          </div>
        </div>
      </li>
      <li>
        <div class="search-item">
          <div class="left">
            <img src="https://openlayers.org/en/latest/examples/data/icon.png"/>
          </div>
          <div class="right">
            <div class="info">
              <div class="type">Lorem Ipsum</div>
              <div class="id">EXDKKS</div>
            </div>
            <div class="name">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div>            
          </div>
        </div>
      </li>
    </ul>
  </div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="search-list">
        <div class="search-item">
            <div class="img-container">
                <img src="https://openlayers.org/en/latest/examples/data/icon.png" />
            </div>
            <div class="info">
                <div class="item-header">
                    <div class="type">Lorem Ipsum</div>
                    <div class="id">EXDKKS</div>
                </div>
                <div class="name">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book
                </div>
            </div>
        </div>
    </div>

    <div class="search-list">
        <div class="search-item">
            <div class="img-container">
                <img src="https://openlayers.org/en/latest/examples/data/icon.png" />
            </div>
            <div class="info">
                <div class="item-header">
                    <div class="type">Lorem Ipsum</div>
                    <div class="id">EXDKKS</div>
                </div>
                <div class="name">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                </div>
            </div>
        </div>
    </div>

</body>

</html>

.search-item {
    display: flex;
}

.search-list {
    margin-top: 5px;
    background-color: #e4edf5;
    padding: 5px 5px;
    border-radius: 5px;
}

.info {
    display: flex;
    flex-direction: column;
    width: 85%;
}

.item-header {
    display: flex;
    justify-content: space-between;
}