1

我在这里遇到了一些问题，设计师坚持某个设计已经完成，并用我们都知道的开发人员说它可以完成但你做不到。

我认为这是不可能的，但是在这里阅读了有关使用 jQuery .append 的信息，所以它很可能毕竟是。任何建议都会非常感谢。

这是我的代码：

<section id="technologies">
   <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>
<div id="ddWrapper">
    <div id="ddContent" class="targetDiv">
         Content Content
    </div>
</div>

ul 是 4 个浮动的左白框，每个框都有一个图像。下方的 div 只是与 . 相同的一段内容。

该站点是一个响应式站点，因此当它缩小为平板电脑视图时，四个左侧浮动的 li 会变成两排两排，并且在智能手机视图中一个堆叠在另一个之上。

在每个视图中，该部分下方的 div 只是调整大小以适应并重新排列内容。

设计师不高兴，因为他的设计说在 960px 视图中， div id="ddWrapper" 在四个左对齐框的下方；在平板电脑 600px 视图中，div 必须位于两行之间，而在智能手机 320px 视图中，它必须位于第一个 li 之下。

对我来说，这不是一个响应式布局，但我一直在尝试使用 jQuery 将兔子从帽子中拉出来，让设计师开心。

有没有办法使用 jQuery 的 append() 根据当前布局将 div id="ddWrapper" 移动到 HTML 中的不同位置？这个问题已经超出了我目前对 jQuery 的了解，所以我寻求任何人都可以提供的帮助。

干杯

坦率

4

1 回答 1

3

实现这一点的最简单方法可能是多次包含某些内容并仅显示：无；你不想要的内容。IE

<section class="desktop-technologies">
   <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>


<section class="tablet-technologies">
  <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
 </ul>
</section>


<section class="mobile-technologies">
  <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
 </ul>
</section>


<div id="ddWrapper">
    <div id="ddContent" class="targetDiv">
         Content Content
    </div>
</div>


<section class="tablet-technologies">
  <ul>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>


<section class="mobile-technologies">
  <ul>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>

那么你可以申请：

.tablet-technologies, .mobile-technologies {
    display:none;
}

适当的部分显示适当的样式。

这不是最干净的解决方案，但它不会增加文件大小的太多开销，并且无需 javascript 即可控制。

希望有帮助！

于 2012-07-16T14:40:03.570 回答