如何使用 css、flexbox、js 移动 <div> - wordpress答案

【问题标题】：How to move <div> using css, flexbox, js - wordpress如何使用 css、flexbox、js 移动 <div> - wordpress
【发布时间】：2021-03-29 20:04:35
【问题描述】：

我使用了一个插件并创建了这个结构：class1 class2 class 3 image1

<div class="total">
      <div class="aaa"></div>
      <div class="bbb"></div>
      <button class="ccc"></button>
</div>

我需要这样：image2 使用 css、flex、JS 等。
第一类
2 类 3 类

请告诉我怎么做？

谢谢。

【问题讨论】：

请尝试自己解决这个问题。你累了什么？什么没用？提出一系列要求而没有尝试解决问题的问题往往不会被很好地接受
它工作正常，对不起，我在看模板页面，它在产品页面上工作得很好，非常感谢

标签： css wordpress flexbox

【解决方案1】：

CSS：

.total {
  max-width: 100%
}

.total div {
  border: 2px solid #000;
  padding: 15px 30px;
}

.aaa {
  display: block;
  clear: both;
  width: 33.33%;
}

.ccc, .bbb {
  float: left;
  width: 33.33%;
}

<div class="total">
      <div class="aaa"></div>
      <div class="bbb"></div>
      <button class="ccc"></button>
</div>

【讨论】：

感谢您的帮助，但它不起作用... 3个div仍然在一行中..
它工作正常，对不起，我在看模板页面，它在产品页面上工作得很好，非常感谢

【解决方案2】：

我是通过以下方式完成的，希望对你有用：

.row2 {
  display: flex;
}

.aaa {
  width: 80px;
  height: 20px;
  padding: 10px;
  margin: 2px;
  border: solid 1px black;
}

.bbb {
  width: 80px;
  height: 20px;
  padding: 10px;
  margin: 2px;
  border: solid 1px black;
}

.ccc {
  width: 80px;
  height: 43px;
  padding: 10px;
  margin: 2px;
  border: solid 1px black;
}

 <div class="total">
  <div class="row1">
    <div class="aaa">aaa</div>
  </div>
  <div class="row2">
    <div class="bbb">bbb</div>
    <button class="ccc">ccc</button>
  </div>
</div>

【讨论】：

感谢您的帮助，但是我使用插件创建了代码，所以我无法编写新的 css。我只能编辑css...有什么理由要使用php将div添加到现有代码中？
我做了这个，检查一下兄弟：codepen.io/johan-sanchez-the-reactor/pen/bGgezqy
它工作正常，对不起，我在看模板页面，它在产品页面上工作得很好，非常感谢
好兄弟！继续编码

【解决方案3】：

试试这个：

<div class="total">
  <div class="aaa" style=“display:block;”></div>
  <div class="bbb"></div>
  <button class="ccc"></button>
</div>

【讨论】：

你用的是什么插件？你还在使用 css 样式文件吗？
它工作正常，对不起，我在看模板页面，它在产品页面上工作得很好，非常感谢
第一个<div class="total"> 甚至还没有关闭。请确保关闭所有打开的标签。