分享
为什么问答平台  ›  专栏  ›  技术社区  ›  Ray

在具有flex的元素旁边显示元素 - Display element next to element with Flex

  •  0
  • Ray  · 技术社区  · 1 周前

    我的DIV元素和类 user-list 正在下面显示 .result 但应该放在它旁边。

    我试过了 float: left 但它不起作用。我怎么能用flex呢?

    .chat {
      position: relative;
      left: 10vw;
      height: 95vh;
      background-color: burlywood;
      width: 80vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }
    
    .result {
      width: 80vw;
      height: 80vh;
      float: left;
      background: red;
    }
    
    .user-list {
        background-color: #F1F1F4;
        float: left;
        height: 100%;
        overflow: auto;
        width: 200px;
    }
    <div class="chat">
    
      <div class="result"></div>
    
      <div class="user-list">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia delectus, voluptatum ducimus ratione nemo dolor consequuntur maiores corrupti rerum architecto qui necessitatibus nulla, deserunt harum quaerat facere, eius et minus.
      </div>
    </div>
    2 回复  |  直到 1 周前
        1
  •  1
  •   Alexander Kartsev    1 周前

    使用“flex-direction:row”而不是“flex-direction:column”on“.chat”元素。