用纯CSS怎么让3个或更多的DIV处于同一行？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用纯CSS怎么让3个或更多的DIV处于同一行？相关的知识，希望对你有一定的参考价值。

div是块状元素，按照默认文档流占一行，所以为了使多个DIV处于同一行，可以用两种方式：

    将div改为行内元素

    display:inline-block;

    改变默认的文档流

    float:left;

示例如下：

    创建html元素

    <div class="test test1">
    方式一：display:inline-block;<br>
    <div></div><div></div><div></div>
    </div>
    <div class="test test2">
    方式二：float:left;<br>
    <div></div><div></div><div></div>
    </div>

    设置css样式

    div.testwidth:400px;height:100px;margin:10px;border:4px solid #ebbccb;
    div.test1 div
    width:100px;height:50px;
    border:2px solid #ccc;
    margin:10px;
    display:inline-block; /*注意此处采用行内元素的方式*/

    div.test2 div
    width:100px;height:50px;
    border:2px solid #ccc;
    margin:10px;
    float:left;          /*注意此处改变默认文档流，采用浮动的方式*/

    观察显示效果


 参考技术A

可以利用float属性实现多个div处于统一行。

例如：

div
width:30px;
height： 30px;
float：left;

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

还可以利用display：inline；将div强制转换为内联元素也可实现多个div处于同一行。

 参考技术B 设置最外层的宽度 比如 width：800px然后设置你要并列显示3个的DIV 的浮动 和 宽度 比如 float：left width：200px 参考技术C 宽度够的话，一个左浮动动，一个右浮动，一个不浮动就行了 参考技术D 用class 同一个css就可以了

同一行上的多个 DIV

【中文标题】同一行上的多个 DIV【英文标题】：Multiple DIVs on same row 【发布时间】：2021-10-23 04:45:06 【问题描述】：

如何在同一行的 1 个 div 内添加多个 div，它们显示在不同的行上。我只使用 HTML 和 CSS。

Screenshot of how it is now

Screenshot of what aiming for

HTML（Div 在 Buttons 注释下）：

<!DOCTYPE html>
<html>
<head>
    <title>Cook Book</title>
    <link rel="stylesheet" href="../CSS/StyleSheet.css">
</head>
<body>
    
    <!-- Page Header -->
    <header class="Header">
        <div class="HeaderDiv">
            <h1 class="HeaderText"> Welcome To Cook Book!</h1>
        </div>
    </header>

    <!--Buttons-->
    <div class="navbar">
        <a href="Home.html" style="width: 20%">Home</a>
            <div class="RecipesDropDown">
                <button class="RecipesButton" style="width: 20%">Recipes</button>
                <div class="DropDown-Content-Recipes">
                    <a href="ApplePie.html">Apple Pie</a>
                    <a href="BananaPie.html">Banana Cream Pie</a>
                </div>
            </div>
            <div class="TermsDropDown">
                <button class="TermsButton" style="width: 20%">Cooking Terms</button>
                <div class="DropDown-Content-Terms">
                    <a href="Terms.html">Pie Cooking Terms</a>
                </div>
            </div>
            <div class="DietDropDown">
                <button class="DietButton" style="width: 20%">Cooking Diets</button>
                <div class="DropDown-Content-Diet">
                    <a href="HealthyRecipes.html">Practical & Healthy Recipes</a>
                    <div class="WeeklyDropDown">
                        <button class="WeeklyButton" style="width: 20%">Recipes</button>
                        <div class="DropDown-Content-Weekly">
                            <a href="Week1.html">Week 1</a>
                            <a href="Week2.html">Week 2</a>
                            <a href="Week3.html">Week 3</a>
                            <a href="Week4.html">Week 4</a>
                        </div>
                    </div>
                </div>
            </div>
        <a href="Contact.html" style="width: 20%">Contact Us</a>
    </div>
    
    <!-- Middle Text -->
    <div class="MiddleDiv">
        <p class="MiddleText"> <b>Your Favorite Foods, <br> Your Weight Loss Goals, <br> Your Kind Of Diet!</b></p>
        <input type="email" class="EmailText" placeholder="Enter Your Email" size="35">
        <button type="submit" class="EmailButton"> Subscribe </button>
    </div>
    
    <!--Bottom Watermark-->
    <div>
        <div class="BottomDiv">
            <p> Delicious no-frill meals, all custom selected for your specific calorie goal, delivered to your inbox weekly! </p>
        </div>
        <div class="Watermark">
            <p> © Souheil Tawil - 2021 </p>
        </div>
        
    </div>
    
</body>
</html>

CSS（Div 样式在第一个注释块下）：

body 
    background-image: url("../Images/bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    margin: 0;


.Header
    background-image: url("../Images/woodbg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;


.HeaderDiv
    color: white;
    font-size: 25px;
    text-align: center;
    text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;


.HeaderText
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 30px;


.Watermark
    color: #000000; 
    background-color: white; 
    text-align: center; 
    position: absolute; 
    bottom: 0; 
    width: 100%;


.BottomDiv
    color: #ADD8E6; 
    background-color: red; 
    font-size: 19px;
    text-align: center; 
    position: absolute; 
    width: 100%;
    height: 100px;
    bottom: 0;


.MiddleDiv
    text-align: center;
    text-align: left;


.MiddleText
    margin-top: 330px;
    margin-left: 150px;
    font-size: 42px;
    color: white;
    text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;


.EmailText
    margin-left: 150px;
    line-height: 30px;


.EmailButton
    color: white;
    background-color: red;
    padding: 6px 30px;


                                    /* ---------------------------- */
                                    /*   Drop Down Navigation Bar   */
                                    /* ---------------------------- */

.navbar 
    overflow: hidden;
    background-color: #668e45;


.navbar a 
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;


                                    /* ---------------------------- */
                                    /*   Drop Down Recipes Button   */
                                    /* ---------------------------- */

.RecipesDropDown 
    overflow: hidden;


.RecipesDropDown .RecipesButton 
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;


.navbar a:hover, .RecipesDropDown:hover .RecipesButton 
    background-color: #03fc77;


.DropDown-Content-Recipes 
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;


.DropDown-Content-Recipes a 
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;


.DropDown-Content-Recipes a:hover 
    background-color: #ddd;


.RecipesDropDown:hover .DropDown-Content-Recipes 
    display: block;


                                    /* ---------------------------- */
                                    /*    Drop Down Terms Button    */
                                    /* ---------------------------- */

.TermsDropDown 
    overflow: hidden;


.TermsDropDown .TermsButton 
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;


.navbar a:hover, .TermsDropDown:hover .TermsButton 
    background-color: #03fc77;


.DropDown-Content-Terms 
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;


.DropDown-Content-Terms a 
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;


.DropDown-Content-Terms a:hover 
    background-color: #ddd;


.TermsDropDown:hover .DropDown-Content-Terms 
    display: block;

                                    /* ---------------------------- */
                                    /*    Drop Down Diet Button    */
                                    /* ---------------------------- */

.DietDropDown 
    overflow: hidden;


.DietDropDown .DietButton 
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;


.navbar a:hover, .DietDropDown:hover .DietButton 
    background-color: #03fc77;


.DropDown-Content-Diet 
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;


.DropDown-Content-Diet a 
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;


.DropDown-Content-Diet a:hover 
    background-color: #ddd;


.DietDropDown:hover .DropDown-Content-Diet 
    display: block;

                                    /* ---------------------------- */
                                    /*    Drop Down Diet Button    */
                                    /* ---------------------------- */

.WeeklyDropDown 
    overflow: hidden;


.WeeklyDropDown .WeeklyButton 
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0;
    border: 2px solid #FFFFFF;


.navbar a:hover, .WeeklyDropDown:hover .WeeklyButton 
    background-color: #03fc77;


.DropDown-Content-Weekly 
    display: none;
    position: absolute;
    background-color: #03fc77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;


.DropDown-Content-Weekly a 
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;


.DropDown-Content-Weekly a:hover 
    background-color: #ddd;


.WeeklyDropDown:hover .DropDown-Content-Weekly 
    display: block;

我在 .nav 中尝试了 flex 和 block inline，但没有成功，白色边框用于显示按钮大小。

编辑：添加后

.navbar 
    overflow: hidden;
    background-color: #668e45;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

并将宽度从 20% 修改为适合内容的按钮现在可以工作，边框围绕按钮文本而不是围绕整个绿色 div。如果有更好的解决方法，请告诉我。

【问题讨论】：

给父 div “display: flex”，对于内部 div-s 给他们“display: inline-block”。 【参考方案1】：

我想你想要这样的东西？

您可以通过使用flexbox来实现这一点，在flexbox中创建一个div并将所有Div包装在其中。并确保您使用flex-direction: row; 连续创建多个 div。并使其响应式在其中应用media query。

Learn media queries

Learn Flex box

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .wrap 
      display: flex;
      flex-direction: row;


    

    .dw 
      width: 180px;
      margin-left: 1px;
      height: 30px;
      display: flex;
      justify-content: center;
      padding-top: 14px;
      border-radius: 20px;
      background-color: #3A800D;

    

    a 
      color: white;
      text-decoration: none;
    



    .dropdown 
      float: left;
      overflow: hidden;
    

    .dropdown .dropbtn 
      font-size: 16px;
      width: 180px;
      padding-top: 14px;
      border-radius: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: #3A800D;
      font-family: inherit;
      margin: 0;
    

    .navbar a:hover,
    .dropdown:hover .dropbtn 
      background-color: #3A800D;
    

    .dropdown-content 
      display: none;
      position: absolute;
      background-color: #3A800D;
      border-radius: 30px;
      width: 180px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    

    .dropdown-content a 
      float: none;
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    



    .dropdown:hover .dropdown-content 
      display: block;
    

    @media only screen and (max-width: 600px) 
       .wrap
       display: flex;
       flex-direction: column;
       align-items: center;
       
  
  .dw
    margin-top: 10px;
  
  .dropbtn , .dropdown
    margin-top: 10px;
  

  </style>

  <div class="wrap">

    <div class="dw">
      <a href="">Home</a>

    </div>

    <div class="dw">
      <a href="">Recipes</a>

    </div>

    <div class="dw">
      <a href="">Cooking Terms</a>

    </div>


    <div class="dropdown">
      <button class="dropbtn">Cooking Diet
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        
        <a href="#">Link 1</a>
        <hr>
        <a href="#">Link 2</a>
        <hr>
        <a href="#">Link 3</a>
      </div>
    </div>

    <!-- <div class="dw">
      <a href="">Contact Us</a>

    </div> -->
  </div>
</body>

</html>

如果这对您有帮助，请告诉我。

使用全屏页面预览。

【讨论】：

【参考方案2】：

在较小的 div CSS 中试试这个：

float: left;

它将所有左对齐 1 行中的 div

【讨论】：

以上是关于用纯CSS怎么让3个或更多的DIV处于同一行？的主要内容，如果未能解决你的问题，请参考以下文章

一行内怎么显示3个div层呢？

div标签如何与其他标签在同一行

怎么能让两个DIV标签在同一行

两个div怎么在同一行？

2个div标签同在一行，然后怎么让他们2个的宽度一样，占满整的一行？

用纯js 实现两个div按钮之间的切换