小编nic*_*ick的帖子

我有一个相当困难的问题,我坚持认为如果使用CSS甚至可以实现这一点,我将不胜感激.我有6个div,1-3个需要在左栏中,4-6个在右栏中.当您单击任何div时,它们使用jquery hide()隐藏.我发现困难的部分是当你删除一个div时,我需要它们以特定方式重新排序.请参阅附图,了解订单/重新订购.看到我的进步,感谢一帮助.

https://jsfiddle.net/m44pzvz4/

 <div id="container">
     <div class="child">1</div>
     <div class="child">2</div>
     <div class="child">3</div>
     <div class="child">4</div>
     <div class="child">5</div>
     <div class="child">6</div>  
 </div>

因此,您可以看到,如果删除了任何1-3 div,则4-6中的div需要从左列移动到第一列中的最后一个点.

我正在使用flexbox来连接我的4个元素.

然后,我想像移动设备那样打破这个:

我在这里成功重新排序了元素:

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  width: 90%;
  margin: 0 auto;
  background: red;
}

.flexcontainer>div {
  height: 100px;
  width: 25%;
  background-color: #E46119;
  border: 1px solid #626262;
  margin: 3px;
}

.flexcontainer>div:nth-of-type(1) {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  order: 3;
}

.flexcontainer>div:nth-of-type(2) {
  -webkit-flex: 2 0 0;
  flex: 2 0 0;
  order: 2;
}

.flexcontainer>div:nth-of-type(3) {
  -webkit-flex: 2 0 0;
  flex: 2 0 0;
  order: 1;
}

.flexcontainer>div:nth-of-type(4) …

我正在使用Shopify开发我的电子商务网站,我对资产有点困惑.

我只是将我的所有JavaScript,CSS和图像转储到assets文件夹中,还是可以在assets文件夹中为每个子文件夹提供子文件夹？

我需要在.liquid中结束每个文件名吗？

如果我可以创建子文件夹,我会使用这样的相对路径吗？

{{ 'css/default.css' | asset_url | stylesheet_tag }}

当我通过 chrome 开发工具检查页面时，会看到一个非常大的 cookie 列表，而使用 document.cookie 时则只有几个。

谁能解释一下这些 cookie 和通过我的 console.log 获得的 cookie 之间的区别，以及为什么我无法通过 javascript 访问它们？

是否有可能使用 javascript 获取我在开发工具中看到的这些 cookie？我需要先手动设置它们吗？

谢谢！

要将一行文本分成两行，我正在使用：

<p>Line one <span>line two</span></p>   
p span { 
     display:block
}

但是在我的页面的移动版本上，我想删除元素上的那个块，以便它在一行上显示所有内容。是否有 display:block 的反面？我是否使用正确的方法来实现这一目标？

我想为我的页面添加一个特定的样式,但只在运行在PC上的Firefox上.我用这个代码只针对mac,但是windows会等同于什么？有没有办法用媒体查询而不是javascript来做到这一点？

var FF = !(window.mozInnerScreenX == null);

if(FF) {
    if(navigator.platform.indexOf('Mac')>=0)
         {
            // is a mac and on firefox
         }

有没有办法在同一个元素上同时使用 vmax 和 vmin ，以便我可以创建一个范围来阻止它变小或变大？当我只使用一个时，它会变得很大或很小，我试图限制它两侧的极端。这适用于响应式设计。

http://jsfiddle.net/Sc8gm/29/

<p>Here is some paragraph text at 3 vmin</p>
<h1>Here is some paragraph text at 3 vmin</h1>
<style>
    p {font-size: 3vmax;}
    h1 {font-size: 3vmin;font-size:4vmax;}
</style>

我有一个按钮,我试图将此图像应用于其背景,绿色是关闭状态,黄色是点击状态.我可以在两个状态都在同一个文件中的情况下使用此图像,还是需要将它们分开？这种情况的标准是什么？css如何工作？

<button>click me</button>
button {
    background-image:url('button.png');
}

我有一组4个单选按钮,后跟文本输入,当用户点击文本输入字段时,我试图清除所有无线电输入.到目前为止,这是我的代码.

 <input type="radio" name="radio"><label for="radio1">1</label>
 <input type="radio" name="radio"><label for="radio2">2</label>
 <input type="radio" name="radio"><label for="radio3">3</label>
 <input type="radio" name="radio"><label for="radio4">4</label>
 <input type="text" id="textInput">

 <script>
      $('#textinput').click(function () {
          radio.checked = false;
      });
 </script>

下图是我的目标。我有 4 个 div，全部样式为圆形。我想像下图一样对齐它们。仅使用 css 的 z-index 就可以做到这一点吗？如果有人有一些见解，我一直在努力想出解决方案。你可以在小提琴中看到我的进步。

http://jsfiddle.net/v7d4s210/1/

<div id="circleContainer">
    <div class="circle spin yellow"></div>
    <div class="circle spin orange"></div>
    <div class="circle spin red"></div>
    <div class="circle spin purple"></div>
</div>

.circle {
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
    }
    #circleContainer {
        width:600px;
        display: block;
        margin: 0 auto;
        background: #f5f5f5;
        position: relative;
        top:200px;

    }    
    .yellow{
        width: 250px;
        height: 250px; 
        background:red;
        position: absolute; 
        z-index: 4;
        top:-100px;
    }
    .orange{
        width: 250px;
        height: 250px;          
        background:blue;
        position: absolute; 
        z-index: 3;
        left:100px
    }
    .red{
        width: 250px;
        height: 250px; …