如何使用 flex 方向将多个 div 定位在 div 内的不同位置？

【问题标题】：How to position multiple divs in different location inside div using flex direction?如何使用 flex 方向将多个 div 定位在 div 内的不同位置？
【发布时间】：2021-01-04 08:55:08
【问题描述】：

我正在尝试实现附加的类似设计

但不能这样做， 我正在使用 css flex 方向并希望仅以这种方式实现它..我该怎么做？ 在我的 css 部分中，我还尝试并评论了我正在使用但每次都失败的代码。如果 flex 方向不起作用，还有其他方法可以实现吗？

下面是我的html代码和css代码：

<!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="../assets/css/test.css">

</head>

<body>
    <div class="container">
        
    <div id="div1">


        <table class="table-content" class="table table-striped  table-bordered table-sm w-auto text-xsmall">

            <tr>
                <td>
                    <table>
                        <thead>
                            <th>
                                Builder Call
                            </th>
                            <th>
                                Calling Number
                            </th>
                            <th>
                                Calling Date
                            </th>

                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="builder" id={{ID}}+"builder" class="lopem">
                                        <option value=""></option>
                                        <option value="Done">Done</option>
                                        <option value="Pending">Pending</option>
                                        <option value="Not_Required">Not Required</option>
                                        <option value="No_answer">No Answer</option>
                                        <option value="Not_Connected">Not Connected</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" id={{ID}}+"number">

                                </td>

                                <td>
                                    <input type="date" id={{ID}}+"calldate">
                                </td>


                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>

            <tr>
                <td>
                    <table>
                        <thead>
                            <th>
                                Broker Call
                            </th>
                            <th>
                                Calling Number
                            </th>
                            <th>
                                Calling Date
                            </th>

                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="broker" id={{ID}}+"broker" class="lopem">
                                        <option value=""></option>
                                        <option value="Done">Done</option>
                                        <option value="Pending">Pending</option>
                                        <option value="Not_Required">Not Required</option>
                                        <option value="No_answer">No Answer</option>
                                        <option value="Not_Connected">Not Connected</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" id={{ID}}+"brokernumber">
                                </td>
                                <td>
                                    <input type="date" id={{ID}}+"brokerdate">
                                </td>

                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>

        </Table>
    </div>
    {{!-- second table --}}
    <div id="div2">
        <table class="table-content">
            <thead>
                <th>
                    Slot Enquiry
                </th>
                <th>
                    Slot type
                </th>
                <th>
                    Slot Enquiry Date
                </th>

            </thead>
            <tbody>
                <tr>
                    <td>
                        <select name="slot" id={{ID}}+"slot" class="lopem">
                            <option value=""></option>
                            <option value="Done">Done</option>
                            <option value="Pending">Pending</option>
                            <option value="Not_Required">Not Required</option>
                            <option value="No_answer">No Answer</option>
                            <option value="Not_Connected">Not Connected</option>
                        </select>
                    </td>
                    <td>
                        <select name="slottype" id={{ID}}+"slottype" class="lopem">
                            <option value=""></option>
                            <option value="Builder">Builder</option>
                            <option value="Broker">Brokder</option>
                        </select>
                    </td>
                    <td>
                        <input type="date" value='' id={{ID}}+"enquirydate">
                    </td>


                </tr>

            </tbody>



        </Table>
    </div>

    {{!-- third div  --}}

    <div id="div3">
        <table>
            <tr>
                <table>
                    <thead>
                        <th>
                            Email Builder
                        </th>
                        <th>
                            Email Address
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select name="emailbuilder" id={{ID}}+"emailbuilder" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" value="" id={{ID}}+"emailaddress">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </tr>
            <tr>
                <table>
                    <thead>
                        <th>
                            Email Broker
                        </th>
                        <th>
                            Email Address
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>

                                <select name="emailbroker" id={{ID}}+"emailbroker" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>

                            </td>
                            <td>
                                <input type="text" value="" id={{ID}}+"brokeraddress">
                            </td>


                        </tr>
                    </tbody>
                </table>
            </tr>
        </table>

    </div>

    <div id="div4">
        <table>
            <tr>
                <table>
                    <thead>
                        <th>
                            WhatsApp Builder
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>

                                <select name="whatsappbuilder" id={{ID}}+"whatsappbuilder" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </tr>
            <tr>
                <table>
                    <thead>
                        <th>
                            WhatsApp Broker
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>

                                <select name="whatsappbroker" id={{ID}}+"whatsappbroker" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>

                            </td>


                        </tr>
                    </tbody>
                </table>
            </tr>
        </table>

    </div>

    <div id="div5">
        <table>
            <thead>
                <th>
                    Online Research
                </th>

            </thead>
            <tbody>
                <tr>
                    <td>

                        <select name="onlineresearch" id={{ID}}+"onlineresearch" class="lopem">
                            <option value=""></option>
                            <option value="Done">Done</option>
                            <option value="Pending">Pending</option>
                            <option value="Not_Required">Not Required</option>
                            <option value="No_answer">No Answer</option>
                            <option value="Not_Connected">Not Connected</option>
                        </select>

                    </td>
                </tr>

            </tbody>
        </table>


    </div>

    </div>



</body>

</html>

css 代码：我已经评论了我的 css 推送和尝试代码，但失败了：

/* .table-content{
    border: 2px solid black;
    padding: 42px;
    
}
.table-content tr td{
    
    padding-top: 10px;
} */
/* #div1{
    display: block;
    border: 2px solid;
    text-align: -webkit-center;
    width: fit-content;
    padding: 36px;
    margin-bottom: 12px;

}
#div2{
    display: block;
    border: 2px solid;
    text-align: -webkit-center;
    width: fit-content;
    padding: 36px;
    width: 443px;
    
}
#div3{
    display: block;
    border: 2px solid;
    text-align: -webkit-center;
    width: fit-content;
    padding: 36px;
    /* float: right; */
    /* direction: rtl; */
    /* text-align: center; */
/* } */

div{
    display: flex;
    border: 2px solid;
    
    width: fit-content;
    padding: 36px;
    margin-bottom: 12px;
    /* flex-direction: row; */
   
}

【问题讨论】：

    标签： html css flexbox responsive-design


    【解决方案1】：

    将这些 div 包装在一个容器中，并将您的 flex css 附加到容器上，类似于下面的 sn-p。你可以把你的桌子放在那些盒子里

    .container {
   width: 960px;
   display: flex;
   flex-direction: row;
}


.box1 {
   background: red;
   width: 100%;
   height: 60px;
}

.box2 {
   background: blue;
   width: 100%;
   height: 60px;
}

.box3 {
   background: green;
   width: 100%;
   height: 60px;
}
    <div class="container">
  <div class="box1"> </div>
  <div class="box2"> </div>
  <div class="box3"> </div>
</div>

    【讨论】：

      【解决方案2】：

      在稍微重构html 的代码并部署一个新的CSS 后，根据提供的图像实现所需的输出。请检查这是否是您正在寻找的东西。 为了更好地验证，请以全页模式查看输出。

      .row-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 12px;
}
input, select{
border: none;
}
table{
border: 1px solid #ffffff;
border-collapse: collapse;
}
table tbody tr{
border: 1px solid #a4a4a4;
}
table tbody td{
border: 1px solid #a4a4a4;
}
#div1,#div2,#div3,#div4,#div5{
  border: 1px solid black;
  padding: 12px;
  
}
      <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/test.css">

</head>

<body>
    <div class="container">
        <div class="row-wrapper">
    <div id="div1">


        
                    <table>
                        <thead>
                            <th>
                                Builder Call
                            </th>
                            <th>
                                Calling Number
                            </th>
                            <th>
                                Calling Date
                            </th>

                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="builder" id={{ID}}+"builder" class="lopem">
                                        <option value=""></option>
                                        <option value="Done">Done</option>
                                        <option value="Pending">Pending</option>
                                        <option value="Not_Required">Not Required</option>
                                        <option value="No_answer">No Answer</option>
                                        <option value="Not_Connected">Not Connected</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" id={{ID}}+"number">

                                </td>

                                <td>
                                    <input type="date" id={{ID}}+"calldate">
                                </td>


                            </tr>
                        </tbody>
                    </table>
              

                    <table>
                        <thead>
                            <th>
                                Broker Call
                            </th>
                            <th>
                                Calling Number
                            </th>
                            <th>
                                Calling Date
                            </th>

                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="broker" id={{ID}}+"broker" class="lopem">
                                        <option value=""></option>
                                        <option value="Done">Done</option>
                                        <option value="Pending">Pending</option>
                                        <option value="Not_Required">Not Required</option>
                                        <option value="No_answer">No Answer</option>
                                        <option value="Not_Connected">Not Connected</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" id={{ID}}+"brokernumber">
                                </td>
                                <td>
                                    <input type="date" id={{ID}}+"brokerdate">
                                </td>

                            </tr>
                        </tbody>
                    </table>
             

       
    </div>
       <div id="div3">
        <table>
            <tr>
                <table>
                    <thead>
                        <th>
                            Email Builder
                        </th>
                        <th>
                            Email Address
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select name="emailbuilder" id={{ID}}+"emailbuilder" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" value="" id={{ID}}+"emailaddress">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </tr>
            <tr>
                <table>
                    <thead>
                        <th>
                            Email Broker
                        </th>
                        <th>
                            Email Address
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>

                                <select name="emailbroker" id={{ID}}+"emailbroker" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>

                            </td>
                            <td>
                                <input type="text" value="" id={{ID}}+"brokeraddress">
                            </td>


                        </tr>
                    </tbody>
                </table>
            </tr>
        </table>

    </div>
      <div id="div4">
        <table>
            <tr>
                <table>
                    <thead>
                        <th>
                            WhatsApp Builder
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>

                                <select name="whatsappbuilder" id={{ID}}+"whatsappbuilder" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </tr>
            <tr>
                <table>
                    <thead>
                        <th>
                            WhatsApp Broker
                        </th>

                    </thead>
                    <tbody>
                        <tr>
                            <td>

                                <select name="whatsappbroker" id={{ID}}+"whatsappbroker" class="lopem">
                                    <option value=""></option>
                                    <option value="Done">Done</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Not_Required">Not Required</option>
                                    <option value="No_answer">No Answer</option>
                                    <option value="Not_Connected">Not Connected</option>
                                </select>

                            </td>


                        </tr>
                    </tbody>
                </table>
            </tr>
        </table>

    </div>
          </div>
            <div class="row-wrapper">
    <!-- second table -->
    <div id="div2">
        <table class="table-content">
            <thead>
                <th>
                    Slot Enquiry
                </th>
                <th>
                    Slot type
                </th>
                <th>
                    Slot Enquiry Date
                </th>

            </thead>
            <tbody>
                <tr>
                    <td>
                        <select name="slot" id={{ID}}+"slot" class="lopem">
                            <option value=""></option>
                            <option value="Done">Done</option>
                            <option value="Pending">Pending</option>
                            <option value="Not_Required">Not Required</option>
                            <option value="No_answer">No Answer</option>
                            <option value="Not_Connected">Not Connected</option>
                        </select>
                    </td>
                    <td>
                        <select name="slottype" id={{ID}}+"slottype" class="lopem">
                            <option value=""></option>
                            <option value="Builder">Builder</option>
                            <option value="Broker">Brokder</option>
                        </select>
                    </td>
                    <td>
                        <input type="date" value='' id={{ID}}+"enquirydate">
                    </td>


                </tr>

            </tbody>



        </Table>
    </div>

    <!-- third div  -->

    

    

    <div id="div5">
        <table>
            <thead>
                <th>
                    Online Research
                </th>

            </thead>
            <tbody>
                <tr>
                    <td>

                        <select name="onlineresearch" id={{ID}}+"onlineresearch" class="lopem">
                            <option value=""></option>
                            <option value="Done">Done</option>
                            <option value="Pending">Pending</option>
                            <option value="Not_Required">Not Required</option>
                            <option value="No_answer">No Answer</option>
                            <option value="Not_Connected">Not Connected</option>
                        </select>

                    </td>
                </tr>

            </tbody>
        </table>


    </div>
      </div>

    </div>

      【讨论】：

        【解决方案3】：

        有几种不同的方法可以实现您的目标。

        变体 1 使用一个包含所有 div 的容器，使用 display: flex 并将其设置为在超过行宽时换行 (flex-wrap: wrap)，最后为子 div 设置所需的宽度。

        变体 2 使用包含每个列的另一个 div 的主容器，将主容器设置为 display: flex 并根据需要调整列容器的宽度。

        /* VARIANT 1 */
.container1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* set widths of the divs according to your needs */
#div1,
#div4 {
  flex-basis: 50%;
}

#div2,
#div5 {
  flex: 1;
  /* stretch to fill remaining space */
}

#div3,
#div6 {
  width: 50px;
  /* fixed width */
}

/* VARIANT 2 */

.container2 {
  width: 100%;
  display: flex;
}

/* set widths of the sub containers according to your needs */
.container2>.subcontainer:nth-child(1) {
  flex: 3;
}

.container2>.subcontainer:nth-child(2) {
  flex: 2;
}

.container2>.subcontainer:nth-child(3) {
  flex: 1;
}

/* below styles for demo only */
#div,
#div1,
#div2,
#div3,
#div4,
#div5,
#div6 {
  text-align: center;
  background: lightgray;
  padding: 10px;
  margin: 10px;
}
        <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
      V1

    <div class="container1">
      <div id="div1">Table 1</div>
      <div id="div2">Table 2</div>
      <div id="div3">Table 3</div>
      <div id="div4">Table 4</div>
      <div id="div5">Table 5</div>
      <div id="div6">Table 6</div>
    </div>

    <hr>
    V2
    <div class="container2">
      <div class="subcontainer">
        <div id="div">Table 1</div>
        <div id="div">Table 2</div>
      </div>
      <div class="subcontainer">
        <div id="div">Table 3</div>
        <div id="div">Table 4</div>
      </div>
      <div class="subcontainer">
        <div id="div">Table 5</div>
        <div id="div">Table 6</div>
      </div>
    </div>
  </body>

</html>

        【讨论】：

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2022-01-23
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2016-05-21
          • 2012-10-16
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode