多个div排列在同一行而不换行

最新推荐文章于 2024-09-10 22:55:28 发布

Kiloveyousmile

最新推荐文章于 2024-09-10 22:55:28 发布

阅读量3.4w

点赞数 12

分类专栏：前端布局文章标签： css javascript div排列

本文链接：https://blog.csdn.net/Kiloveyousmile/article/details/80248083

版权

前端布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

　　有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法：

1. 同级div设置display:inline-block，父级div强制不换行

例如：

<html>
<head></head>
<body>
  <div id="container">
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
  <div>
</body>
<style>
  #container {
    width:400px;
    height: 200px;
    background-color: red;
    overflow: auto;
    white-space: nowrap;
  }
  .lable {
    width: 100px;
    background-color: blue;
    display: inline-block;
  }
</style>
</html>

2. 通过position绝对定位实现

例如:

<html>
<head></head>
<body>
  <div id="container">
    <div id="lable1">测试测试</div>
    <div id="lable2">测试测试</div>
    <div id="lable3">测试测试</div>
    <div id="lable4">测试测试</div>
    <div id="lable5">测试测试</div>
  <div>
</body>
<style>
  #container {
    width:400px;
    height: 200px;
    background-color: red;
    overflow: auto;
    position: relative;
  }
  #lable1 {
    width: 100px;
    margin-left: 0;
    background-color: blue;
    position: absolute;
  }
  #lable2 {
    width: 100px;
    margin-left: 100px;
    background-color: blue;
    position: absolute;
  }
  #lable3 {
    width: 100px;
    margin-left: 200px;
    background-color: blue;
    position: absolute;
  }
  #lable4 {
    width: 100px;
    margin-left: 300px;
    background-color: blue;
    position: absolute;
  }
  #lable5 {
    width: 100px;
    margin-left: 400px;
    background-color: blue;
    position: absolute;
  }
</style>
</html>

3. 通过flex方式实现

具体请参考：Flex 布局教程：语法篇
例如：

<html>
<head></head>
<body>
  <div id="container">
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
    <div class="lable">测试测试</div>
  <div>
</body>
<style>
  #container {
    width:400px;
    height: 200px;
    background-color: red;
    display: flex;
    display: -webkit-flex;
    /* 从左端开始沿水平轴防止flex item */
    flex-direction: row;
    /* 强制 flex item不换行，沿着同一行堆叠 */
    flex-wrap: nowrap;
    /* flex item在主轴上的对齐方式，这里定义左对齐 */
    justify-content: flex-start;
    /* 定义交叉轴对其方式 */
    align-items: flex-start
  }
  .lable {
    width: 100px;
    margin-left: 5px;
    background-color: blue;
  }
</style>
</html>