如何将两行div放在一行里

代码

<template>
  
  <div id="kuang_jia" :style="Style">
    <div id="img" ref="divImage">
      <img alt="" src="../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg">
      <img alt="" src="../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg">
      <img alt="" src="../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg">
      <img alt="" src="../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg">
      <img alt="" src="../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg">
      <img alt="" src="../../image/9477156de6d94c49c505a9dfce8e8c17.jpg">
      <img alt="" src="../../image/c52be335098658931847fa0ecbcf7d03.jpeg">
      <img alt="" src="../../image/d86d80e8573ab91914a6e9ad5217c785.jpg">
      <img alt="" src="../../image/e305fca1a381bda8482d8b3296da61f6.jpg">
      <img alt="" src="../../image/fa983053c19cf3c7b27491507799e02e.jpeg">
    div>
    <div class="zuo_you">
      <span class="zuo">
          <
      span>
      <span class="you">
          >
      span>
    div>
    
  div>
template>

<script setup>
import { onMounted, ref } from 'vue'

const divImage = ref(null)

const Style = ref()
onMounted(() => {
  let Width = (window.innerWidth - 1000) / 2
  if (Width < 0) {
    Width = 0
  }
  Style.value = {
    left: Width + 'px'
  }
  // 计算页面宽度,然后移动到页面中间
  // setInterval(() => {
  //   setTimeout(() => {
  //     divImage.value.animate({ left: -200 + 'px' }, 1000)
  //   }, 100)
  // }, 1000)
})
script>

<style lang="scss">
#kuang_jia {
  position: absolute;
  z-index: 1;
  width: 1000px;
}

img {
  width: 200px;
  height: 300px;
  position: relative;
}

#img {
  width: 1000px;
  height: 300px;
  position: absolute;
  z-index: 100;
}

.zuo_you {
  margin-top: 50%;
  font-size: 20px;
  color: azure;
  position: absolute;
  z-index: 999;
}

// 设置顶层显示,并且上下居中

.zuo, .you {
  font-size: 50px;
  position: relative;
  cursor: pointer
}

.zuo {
  top: -400px;
}

.you {
  top: -400px;
  left: 910px;
}

// 扩展:z-index(css属性)
// 用法: z-index: 任意数字
// z-index值大的标签在上显示,值小的标签在下显示
// 如果不生效,去这个网站找办法 https://blog.csdn.net/zhangzhanbin/article/details/120370601

style>

问题

需要给父元素设置两倍的宽度，不然就会自动换行。

你 img设置了宽度 所以 你应该不设置宽度 。width:auto; 或者 你用flex 布局 .img{ display:flex;flex-warp:nowarp;}

没加极端判断,你自己加吧,这种原生轮播学习的时候写写就好,工作中 有现成的ui库

<template>

  <div id="kuang_jia" :style="Style">
    <div id="img" ref="divImage">
      <div ref="wrap" class="wrap">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
      </div>
    </div>
    <div class="zuo_you">
      <span class="zuo" @click="changImg(-1)">
        {{`<`}}
      </span>
      <span class="you" @click="changImg(1)">
        {{`>`}}
      </span>
    </div>

  </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue'

const divImage = ref(null)
const wrap = ref(null)
const Style = ref()
// 记录位置
const origin = ref(0)
// 切换轮播
const changImg = (num) => { // num -1 左 1 右
  //原始位置加上移动的位置
  origin.value += num
  wrap.value.style.left = origin.value * 200 + 'px'
}
onMounted(() => {
  let Width = (window.innerWidth - 1000) / 2
  if (Width < 0) {
    Width = 0
  }
  Style.value = {
    left: Width + 'px'
  }

  // 计算页面宽度,然后移动到页面中间
  // setInterval(() => {
  //   setTimeout(() => {
  //     divImage.value.animate({ left: -200 + 'px' }, 1000)
  //   }, 100)
  // }, 1000)
})
</script>
 
<style >
#kuang_jia {
  position: absolute;
  z-index: 1;
  width: 1000px;
}

img {
  width: 200px;
  height: 300px;
  position: relative;
}

#img {
  width: 1000px;
  height: 300px;
  position: absolute;
  z-index: 100;
  overflow: hidden;
}
.wrap {
  width: 2000px;
  height: 300px;
  position: relative;
  left: 0;
  top: 0;
  /* 过渡 */
  transition: 1s;
}

.zuo_you {
  margin-top: 50%;
  font-size: 20px;
  color: azure;
  position: absolute;
  z-index: 999;
}

/* // 设置顶层显示,并且上下居中 */

.zuo,
.you {
  font-size: 50px;
  position: relative;
  cursor: pointer;
}

.zuo {
  top: -400px;
}

.you {
  top: -400px;
  left: 910px;
}

/* // 扩展:z-index(css属性)
// 用法: z-index: 任意数字
// z-index值大的标签在上显示,值小的标签在下显示
// 如果不生效,去这个网站找办法 https://blog.csdn.net/zhangzhanbin/article/details/120370601 */
</style>
 
 

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7779424
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：解决因div导致的换行问题
• 除此之外, 这篇博客: 将两个块放在同一行的两种方法中的 div在结尾自带换行符，若要将两个div标签放在同一行可采用以下两种方法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• （1）用CSS语法设置浮动float:left;，再设置margin边距即可。
  （2）更改display属性为inline-block可以解决
  需注意，在更改display属性为inline-block时，在两个块中间会出现宽度为8px的margin，这是从body中继承而来的。
  具体解决办法如下
  （1）将所有块写在一行，如<div></div><div></div>这种，代码中不出现换行。
  （2）也可以将前一个块的结束标签写在第二个块的起始标签前,例如

  <div>
  
  </div><div>
  
  </div><div>
  
  </div>
  

  虽然办法有多种多样，但是归根到底，主要目的是为了起始标签与结束标签中间没有空格或者换行，所以为了方便，推荐用浮动来设置样式

• 您还可以看一下 艾小野老师的div垂直居中-CSS元素垂直居中方法的探究课程中的 块级元素垂直居中的方法小节, 巩固相关知识点