html - 当我将 html 复制到 wordpress 时，为什么我的元素垂直移动？

标签 html css wordpress

我制作了一个本地测试页面来布置图像和内容并确保一切正常。但是，当我将代码移到我的 wordpress 站点时，图像行现在变成了列。我已经制作了唯一的类和 ID 名称，因此它不是现有的 css。 我应该寻找什么？

这是我在本地运行的代码:

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

<head>
  <title>Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div id="wrapper">

    <div id="intro">
      This is the intro text
    </div>
    <div class="topRow">
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
    </div>

    <div id="myModal1" class="modal fade" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">Header 1</div>
          <div class="modal-body">Body 1</div>
          <div class="modal-footer">Footer 1</div>
        </div>
      </div>
    </div>
    <div id="myModal2" class="modal fade" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4></div>
          <div class="modal-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut nisl egestas, pharetra eros nec, feugiat est. Vivamus lobortis mauris libero, sit amet consectetur nisl ultrices quis. Nullam eu dolor sed est elementum dictum sed eget nibh. Sed mauris eros, tincidunt eget orci non, euismod commodo metus. Nullam cursus at justo et viverra. Vestibulum id diam placerat, ultrices lorem nec, suscipit libero. Nulla condimentum urna at lectus vestibulum, a ullamcorper urna consectetur. Donec maximus, ex non lobortis sagittis, dui lorem consequat velit, nec euismod tortor tortor ac velit. In eu dignissim tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis auctor ex lacus, nec posuere dui accumsan eget.</p><p>Quisque sollicitudin quis ex ac ullamcorper. Vivamus ipsum mi, scelerisque vitae risus a, varius mollis tellus. Sed in massa vehicula, molestie tellus a, ornare urna. In volutpat velit vel neque commodo, et pellentesque ipsum rutrum. Phasellus felis arcu, fringilla ac feugiat sit amet, sollicitudin sed dui. Duis eget vestibulum mi, quis elementum mi. In hac habitasse platea dictumst. Maecenas aliquam lacinia nisl, a malesuada orci sollicitudin nec. Nullam vitae pharetra turpis, id eleifend risus. Nulla id placerat augue, ac efficitur justo.</p><p>Duis semper dui vel est commodo tristique. Ut hendrerit imperdiet mattis. Vestibulum feugiat vulputate mollis. Aliquam erat volutpat. Pellentesque placerat eros a vestibulum laoreet. Vestibulum at enim vulputate, cursus ex sit amet, suscipit metus. Morbi hendrerit non lacus nec imperdiet. Donec sit amet odio sit amet ligula rhoncus laoreet non eget tortor. In et nunc diam. Ut a ipsum ullamcorper, luctus turpis id, congue massa. Sed sit amet vulputate purus. Phasellus ac vulputate tortor. Quisque vitae ultrices odio.</p></div>
        </div>
      </div>
    </div>
  </div>

  <div id="wrapper">
    <div class="tableRow">
      <button type="button" class="Category">Category 1</button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal2" style="background: url(http://lorempixel.com/101/101/);"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
    </div>
  </div>

  <div id="wrapper">
    <div class="tableRow">
      <button class="Category">Category 2</button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/101/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal2" style="background: url(http://lorempixel.com/102/101/);"> </button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
    </div>
  </div>

  <div class="bottomRow">
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
      <button type="button" class="square" data-toggle="modal" data-target="#myModal1" style="background: url(http://lorempixel.com/100/100/)"></button>
    </div>
</body>

</html>

和CSS:

#wrapper{
  display: inline-block;
  white-space: nowrap;
}
.square{
  height: 100px; 
  width: 100px; 
  border: none; 
  border-radius:0px;
  vertical-align: top;
  margin-left: -5px;
}
.Category{
  height: 100px; 
  width: 200px; 
  border: none; 
  border-radius:0px; 
  background: white;
  text-align: right;
  vertical-align: top;
}

.topRow{
  margin: 10px 100px 50px 200px;
  display: inline-block;
  white-space: nowrap;
}
.tableRow{
  margin: 0px 100px 0px 0px;
  display: inline-block;
  white-space: nowrap;
}
.bottomRow{
  margin: 50px 100px 50px 200px;
  display: inline-block;
  white-space: nowrap;
}
.wrapper span {
   float: left;
   clear: left;
}

.modal-dialog {
   width: 75%;
   height: 70%;
}
.modal-body{
    height: 250px;
    overflow-y: auto;
    white-space: pre-wrap;
}

在我的本地机器上，它看起来像第一张图片。当我将代码移植到 wordpress 时，它看起来像第二个。

What I want it to look like; horizontal What it looks like on Wordpress

最佳答案

关于html - 当我将 html 复制到 wordpress 时，为什么我的元素垂直移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45767356/

上一篇：javascript - 通过鼠标移动绘制的矩形会在鼠标移动时不断绘制自身，同时显示之前的矩形

下一篇：javascript - 如何在 localstorage 上保存数据并将该数据附加到 some body 元素

相关文章：

javascript - 创建时选择Nav Capital Case

css - 使用与顶级菜单相同颜色的子菜单

php - wp enqueue 脚本库依赖项

wordpress - 如何将 WooCommerce 结帐自定义字段保存到用户元

javascript - 如何根据selectedIndex的值做出决定

javascript - 想在这里使用 Canvas 作为背景

css - 我应该使用最大设备宽度还是最大宽度？

javascript - 添加使用 jQuery 选择的选项

jquery - div中的滚动条滚动而不是页面滚动条

css - 包括 `<link>` 或 `@import` 的 CSS - 哪个更好？

©2024 IT工具网  联系我们