在 CSS 上相互创建 2 个 div [英] Creating 2 div under each other on CSS

查看：22
本文介绍了在 CSS 上相互创建 2 个 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要将我的 2 个块拆分为 4 个块.我的意思是 calibrate,connect,train,analyze 需要分开，但在我的代码中 calibrate 和 connect 在一个块中，而 train 和 analyze 与 boxshadow 在另一个块中相同.我拆分了它们，但在这种情况下，我的动画无法正常工作.如何在不丢失动画的情况下拆分它们并使它们紧密贴合图像?

.div-wrap {显示:弹性；对齐项目:居中；flex-flow: 列 nowrap;对齐内容:间隔；文本对齐:居中；}:根 {--时间:24；}.div-txt p.label {颜色:#0065de；字体:粗体 16px 'Arial';动画持续时间:calc(var(--time) * 1s);动画迭代次数:无限；动画名称:颜色变化；}.div-txt:nth-child(1) p.label:nth-child(2) {动画延迟:0s；}.div-txt:nth-child(1) p.label:nth-child(5) {动画延迟: calc(var(--time)/4 * 1s);}.div-txt:nth-child(3) p.label:nth-child(2) {动画延迟: calc(var(--time)/2 * 1s);}.div-txt:nth-child(3) p.label:nth-child(5) {动画延迟: calc(var(--time)/1.33 * 1s);}.div-img {位置:相对；高度:600px；宽度:600px；/* 边框:2px 实心 #ccc;*//* 背景:径向渐变(椭圆在中心，rgba(153,153,153,1)0%，rgba(0,0,0,1)100%)；*/}.div-img img {位置:绝对；顶部:0；左:50%；显示:块；变换:translateX(-50%);不透明度:0；动画持续时间:calc(var(--time) * 1s);动画迭代次数:无限；动画名称:淡入淡出；}.div-img img:nth-child(1) {动画延迟:0s；}.div-img img:nth-child(2) {动画延迟: calc(var(--time)/8 * 1s);}.div-img img:nth-child(3) {动画延迟: calc(var(--time)/4 * 1s);}.div-img img:nth-child(4) {动画延迟: calc(var(--time)/2.66 * 1s);}.div-img img:nth-child(5) {动画延迟: calc(var(--time)/2 * 1s);}.div-img img:nth-child(6) {动画延迟: calc(var(--time)/1.6 * 1s);}.div-img img:nth-child(7) {动画延迟: calc(var(--time)/1.33 * 1s);}.div-img img:nth-child(8) {动画延迟: calc(var(--time)/1.14 * 1s);}.div-txt {box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);宽度:300px；边距:0 自动；}@keyframes 颜色变化 {0%,25%,100% {颜色:黑色;}1%,24% {颜色:#ED0400；}}@关键帧淡出{0%,20%,100% {不透明度:0；z-index:自动；}1%,99% {z-索引:1；}8%,12%{不透明度:1；}}@media all 和(最小宽度:1170px){.div 包装{flex-flow: 行 nowrap;justify-content: 空间环绕；}}@media all 和(最大宽度:600px){.div-img {最大宽度:100%；}}

<div class="div-txt"><img src="img/svgforlia/connect.svg" style="width: 36px; height: 36px;"><p class="label" style="margin-top: 15px;">Connect</p><p>将 Lia 设备戴在肩上，<br>打开它并将应用程序<br>与设备连接.</p><img src="img/svgforlia/calibrate.svg" style="width: 36px; height: 36px;"><p class="label" style="margin-top: 15px;">校准</p><p>连接后，设置校准以<br>帮助设备记住您的直立<br>和懒散位置.</p>
<div class="div-img"><img src="img/mockups/2.png" title="图片1"><img src="img/mockups/3.png" title="图片2"><img src="img/mockups/5.png" title="图片3"><img src="img/mockups/6.png" title="图片4"><img src="img/mockups/7.png" title="图片5"><img src="img/mockups/8.png" title="图片6"><img src="img/mockups/9.png" title="图片7"><img src="img/mockups/10.png" title="图片8">

<div class="div-txt"><img src="img/svgforlia/train.svg" style="width: 36px; height: 36px;"><p class="label" style="color: #0065de; margin-top: 10px;">Train</p><p>随时随地训练您的姿势，<br>设定每日目标以逐步改善<br>您的姿势.</p><img src="img/svgforlia/analyze.svg" style="width: 36px; height: 36px;"><p class="label" style="margin-top: 15px;">分析</p><p>统计数据让您可以跟踪和分析<br>从第一次<br>训练到最后一次的进展.</p>

请帮助我解决这个问题.

解决方案 

.div-wrap {显示:弹性；对齐项目:居中；flex-flow: 列 nowrap;对齐内容:间隔；文本对齐:居中；}:root { --time: 24;}.div-txt {宽度:300px；边距:20px 自动；填充:10px 5px 3px；box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);}.div-txt img {宽度:36px；高度:36px；}.div-txt p.label {边距顶部:5px；颜色:#0065de；字体:粗体 16px 'Arial';动画持续时间:calc(var(--time) * 1s);动画迭代次数:无限；动画名称:颜色变化；}.div-wrap-txt:nth-child(1) .div-txt:nth-child(1) p.label { animation-delay: 0s;}.div-wrap-txt:nth-child(1) .div-txt:nth-child(2) p.label { animation-delay: calc(var(--time)/4 * 1s);}.div-wrap-txt:nth-child(3) .div-txt:nth-child(1) p.label { animation-delay: calc(var(--time)/2 * 1s);}.div-wrap-txt:nth-child(3) .div-txt:nth-child(2) p.label { animation-delay: calc(var(--time)/1.33 * 1s);}.div-img {位置:相对；高度:600px；宽度:600px；}.div-img img {位置:绝对；顶部:0；左:50%；显示:块；变换:translateX(-50%);不透明度:0；动画持续时间:calc(var(--time) * 1s);动画迭代次数:无限；动画名称:淡入淡出；}.div-img img:nth-child(1) { 动画延迟:0s;}.div-img img:nth-child(2) { animation-delay: calc(var(--time)/8 * 1s);}.div-img img:nth-child(3) { animation-delay: calc(var(--time)/4 * 1s);}.div-img img:nth-child(4) { animation-delay: calc(var(--time)/2.66 * 1s);}.div-img img:nth-child(5) { animation-delay: calc(var(--time)/2 * 1s);}.div-img img:nth-child(6) { animation-delay: calc(var(--time)/1.6 * 1s);}.div-img img:nth-child(7) { animation-delay: calc(var(--time)/1.33 * 1s);}.div-img img:nth-child(8) { animation-delay: calc(var(--time)/1.14 * 1s);}@keyframes 颜色变化 {0%, 25%, 100% { 颜色:黑色；}1%, 24% { 颜色:#ED5F8A；}}@关键帧淡出{0%, 20%, 100% { 不透明度:0;z-index:自动；}1%, 99% { z-index: 1;}8%, 12% { 不透明度:1;}}@media all 和(最小宽度:1170px){.div-wrap { flex-flow: row nowrap;justify-content: 空间环绕；}}@media all 和(最大宽度:600px){.div-img { 最大宽度:100%;}}正文{边距:0；填充:0；}

<div class="div-wrap-txt"><div class="div-txt"><img src="img/svgforlia/connect.svg"><p class="label">连接</p><p>将 Lia 设备戴在肩上，<br>打开它并将应用程序<br>与设备连接.</p>
<div class="div-txt"><img src="img/svgforlia/calibrate.svg"><p class="label">校准</p><p>连接后，设置校准以<br>帮助设备记住您的直立<br>和懒散位置.</p>

<div class="div-img"><img src="//picsum.photos/600/600?image=998" title="图片1"><img src="//picsum.photos/600/600?image=535" title="图片2"><img src="//picsum.photos/600/600?image=593" title="图片3"><img src="//picsum.photos/600/600?image=219" title="图片4"><img src="//picsum.photos/600/600?image=841" title="图片5"><img src="//picsum.photos/600/600?image=1011" title="图片6"><img src="//picsum.photos/600/600?image=1016" title="图片7"><img src="//picsum.photos/600/600?image=976" title="图片8">

<div class="div-wrap-txt"><div class="div-txt"><img src="img/svgforlia/train.svg"><p class="label">训练</p><p>随时随地训练您的姿势，<br>设定每日目标以逐步改善<br>您的姿势.</p>

<div class="div-txt"><img src="img/svgforlia/analyze.svg"><p class="label">分析</p><p>统计数据让您可以跟踪和分析<br>从第一次<br>训练到最后一次的进展.</p>

I need to split my 2 block, on 4 blocks. I mean calibrate,connect,train,analyze needs to be separately, but in my code calibrate and connect are in one block, and train and analyze the same in another block with boxshadow. I splited them, but in this case my animation does not work correctly. How can I split them without losing my animation and bring them closely to image?

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root {
  --time: 24;
}

.div-txt p.label {
  color: #0065de;
  font: bold 16px 'Arial';
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

.div-txt:nth-child(1) p.label:nth-child(2) {
  animation-delay: 0s;
}

.div-txt:nth-child(1) p.label:nth-child(5) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-txt:nth-child(3) p.label:nth-child(2) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-txt:nth-child(3) p.label:nth-child(5) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img {
  position: relative;
  height: 600px;
  width: 600px;
  /*  border: 2px solid #ccc;*/
  /*  background: radial-gradient(ellipse at center, rgba(153,153,153,1) 0%,rgba(0,0,0,1) 100%);*/
}

.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) {
  animation-delay: 0s;
}

.div-img img:nth-child(2) {
  animation-delay: calc(var(--time) / 8 * 1s);
}

.div-img img:nth-child(3) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-img img:nth-child(4) {
  animation-delay: calc(var(--time) / 2.66 * 1s);
}

.div-img img:nth-child(5) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 1s);
}

.div-txt {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 300px;
  margin: 0 auto;
}

@keyframes color-change {
  0%,
  25%,
  100% {
    color: black;
  }
  1%,
  24% {
    color: #ED0400;
  }
}

@keyframes fade {
  0%,
  20%,
  100% {
    opacity: 0;
    z-index: auto;
  }
  1%,
  99% {
    z-index: 1;
  }
  8%,
  12% {
    opacity: 1;
  }
}

@media all and (min-width: 1170px) {
  .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .div-img {
    max-width: 100%;
  }
}

<div class="div-wrap">
  <div class="div-txt">
    <img src="img/svgforlia/connect.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 15px;">Connect</p>
    <p>Wear Lia device on the shoulders, <br>turn on it and connect application <br>with device.</p>

    <img src="img/svgforlia/calibrate.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 15px;">Calibrate</p>
    <p>After connection, set up calibration to <br>help device remember your upright <br>and slouch positions.</p>
  </div>
  <div class="div-img">
    <img src="img/mockups/2.png" title="Image 1">
    <img src="img/mockups/3.png" title="Image 2">
    <img src="img/mockups/5.png" title="Image 3">
    <img src="img/mockups/6.png" title="Image 4">
    <img src="img/mockups/7.png" title="Image 5">
    <img src="img/mockups/8.png" title="Image 6">
    <img src="img/mockups/9.png" title="Image 7">
    <img src="img/mockups/10.png" title="Image 8">
  </div>
  <div class="div-txt">
    <img src="img/svgforlia/train.svg" style="width: 36px; height: 36px;">
    <p class="label" style="color: #0065de; margin-top: 10px;">Train</p>
    <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
    <img src="img/svgforlia/analyze.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 15px;">Analyze</p>
    <p>Statistics let you track and analyze <br>the progress you’ve made from first <br>training to the last.</p>
  </div>
</div>

Please help me in this questions.

解决方案 

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root { --time: 24; }

.div-txt {
  width: 300px;
  margin: 20px auto;
  padding: 10px 5px 3px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.div-txt img {
  width: 36px;
  height: 36px;
}
.div-txt p.label {
  margin-top: 5px;
  color: #0065de;
  font: bold 16px 'Arial';
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(1) p.label { animation-delay: 0s; }
.div-wrap-txt:nth-child(1) .div-txt:nth-child(2) p.label { animation-delay: calc(var(--time) / 4 * 1s); }
.div-wrap-txt:nth-child(3) .div-txt:nth-child(1) p.label { animation-delay: calc(var(--time) / 2 * 1s); }
.div-wrap-txt:nth-child(3) .div-txt:nth-child(2) p.label { animation-delay: calc(var(--time) / 1.33 * 1s); }

.div-img {
  position: relative;
  height: 600px;
  width: 600px;
}
.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) { animation-delay: 0s; }
.div-img img:nth-child(2) { animation-delay: calc(var(--time) / 8 * 1s); }
.div-img img:nth-child(3) { animation-delay: calc(var(--time) / 4 * 1s); }
.div-img img:nth-child(4) { animation-delay: calc(var(--time) / 2.66 * 1s); }
.div-img img:nth-child(5) { animation-delay: calc(var(--time) / 2 * 1s); }
.div-img img:nth-child(6) { animation-delay: calc(var(--time) / 1.6 * 1s); }
.div-img img:nth-child(7) { animation-delay: calc(var(--time) / 1.33 * 1s); }
.div-img img:nth-child(8) { animation-delay: calc(var(--time) / 1.14 * 1s); }

@keyframes color-change {
  0%, 25%, 100% { color: black; }
  1%, 24% { color: #ED5F8A; }
}
@keyframes fade {
  0%, 20%, 100% { opacity: 0; z-index: auto; }
  1%, 99% { z-index: 1; }
  8%, 12% { opacity: 1; }
}

@media all and (min-width: 1170px) {
  .div-wrap { flex-flow: row nowrap; justify-content: space-around; }
}
@media all and (max-width: 600px) {
  .div-img { max-width: 100%; }
}

body { margin: 0; padding: 0; }

<div class="div-wrap">
  <div class="div-wrap-txt">
    <div class="div-txt">
      <img src="img/svgforlia/connect.svg">
      <p class="label">Connect</p>
      <p>Wear Lia device on the shoulders, <br>turn on it and connect application <br>with device.</p>
    </div>
    <div class="div-txt">
      <img src="img/svgforlia/calibrate.svg">
      <p class="label">Calibrate</p>
      <p>After connection, set up calibration to <br>help device remember your upright <br>and slouch positions.</p>
    </div>
  </div>
  <div class="div-img">
    <img src="//picsum.photos/600/600?image=998" title="Image 1">
    <img src="//picsum.photos/600/600?image=535" title="Image 2">
    <img src="//picsum.photos/600/600?image=593" title="Image 3">
    <img src="//picsum.photos/600/600?image=219" title="Image 4">
    <img src="//picsum.photos/600/600?image=841" title="Image 5">
    <img src="//picsum.photos/600/600?image=1011" title="Image 6">
    <img src="//picsum.photos/600/600?image=1016" title="Image 7">
    <img src="//picsum.photos/600/600?image=976" title="Image 8">
  </div>
  <div class="div-wrap-txt">
    <div class="div-txt">
      <img src="img/svgforlia/train.svg">
      <p class="label">Train</p>
      <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
    </div>
    <div class="div-txt">
      <img src="img/svgforlia/analyze.svg">
      <p class="label">Analyze</p>
      <p>Statistics let you track and analyze <br>the progress you’ve made from first <br>training to the last.</p>
    </div>
  </div>
</div>

这篇关于在 CSS 上相互创建 2 个 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆