相关疑难解决方法(0)

例如,我有一些类.article,我想将此类视为网格视图.所以我应用了这种风格:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

该样式将使.article看起来平铺/网格.固定高度可以正常工作.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌.

而我想这样的观点:

这是我的CSS:

#nav-primary ul li:nth-child(1) a:after { }

现在(使用作品无处不在这个在我的网站),除了Internet Explorer 8中......

有没有办法在IE8中使用nth-child？这是这个浏览器最糟糕的版本...没有任何工作,我找不到解决方法.

@edit:我想要实现的简化版本:http://jsfiddle.net/LvvNL/.这只是一个开始.CSS会更复杂,所以我需要能够瞄准每个链接.希望为每个链接添加类不是唯一的方法

@ edit2:我刚才注意到了

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

IS实际上在IE8中工作!但是这个:

#nav-primary ul li:nth-child(1) a:after {
    content: "Text";
    display: block;
    font-weight: normal;
    padding-top: 5px;
    font-size: 12px;
    color: #666;
}

不管用.那么发生了什么？

我正在尝试在CSS + HTML中创建一个如下所示的有序列表:

我不能为我的生活弄清楚如何做到这一点.我尝试过使用,list-image但数字不会出现.我尝试设置背景,但如果list-style-position设置为,它将不会出现在数字后面outside.我尝试用背景设置它list-style-position: inside,然后将文本放在lia中div以对齐它,但浮动,边距等的组合没有包围数字.

这似乎是我在很多网站上看到的东西,但目前我似乎无法找到一个有效的例子,谷歌搜索也没有给我任何结果.

那么,任何人都可以帮我这个吗？如何使用HTML + CSS创建上述内容,理想情况下不使用JS,绝对不使用图像.此文本需要是可选择的并且可以复制/粘贴.

因为一位评论者问,这是我现在的标记:

<ol>
  <li><span>List item one.</span></li>
  <li><span>List item two.</span></li>
  <li><span>List item three.</span></li>
</ol>

我尝试过的CSS都没有接近工作,所以我不确定分享我目前所拥有的价值.这是一个失败的版本......

ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); }
ol li { width: 176px; margin-right: 20px; float: left; }
ol li span { display: block; }

我正在使用layout horizontal wrap根据其大小和容器找到一些项目.这些物品有不同的尺寸,所以有时我会在它们下方失去很多空间.

如果我向你展示情况的草图,那就更好了......

我的相关代码如下:

<style>
  .high {
      height: 200px;
    }

    .low {
      height: 50px;
    }

    .object {
      min-width: 200px;
    }
</style>
<div class="layout horizontal wrap" style="height:auto" id="container">
  <div class="object high">
    <p>1</p>
  </div>
  <div class="object low">
    <p>2</p>
  </div>
  <div class="object low">
    <p>3</p>
  </div>
  <div class="object low">
    <p>4</p>
  </div>
</div>
<script type="text/javascript">
  $(function() {

      $("#container").sortable({
        cursor: "move"
      });
    });
</script>

这些元素是可排序的,因此用户可以移动它们.无法使用固定位置的解决方案.

是否可以使用聚合物阴影来解决它？任何的想法？

我做了一个plnkr,你可以重现它

更新

当我得到一些使用浮点数的建议时,我遇到了一些难以解释我遇到的问题,我正在添加一个新的草图来显示可能的目标.注意用户如何移动大项目两侧的小项目.

所以我有x个"块",我想要向左浮动..像这样:

A B C D

EFGH

但是,如果B是其余部分的两倍,例如,A&E,C&G,D&H之间会有空白区域.

我怎样才能避免这种情况,让所有的容器都向左浮动,然后很好地适应它们之间没有多余的空白区域？

这是空白的问题：我有多个float：left元素，需要将它们排列为2列，而且它们的高度都不同。

为了简化操作，我需要图片中的元素3紧接元素1之后。

我100％使用的是Plain，例如Vainilla CSS和AngularJS。我想避免使用任何JS模块，因为这些元素几乎永久地被加载和重新加载。最重要的是：100％需要避免使用Jquery。

重要更新：

无法使用float：left，float：right方式（如果孩子是偶数或奇数）：将 多个固定宽度/高度可变的框浮动到2列中

重要更新：

在某些情况下，我确实需要仅应用2个元素，一个在另一个的底部。所以我想将属性应用于元素1。

我正在尝试为移动网站获取手风琴菜单.它看起来如下.

下面是我用于菜单的css.

.accordion-anchor {
    float: left;
    width: 50%;
    padding: 0.8em;
    border-left: 1px solid #258ecd;
    color: white;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
    border-bottom: 1px solid #808080;
    background: black;
}

<a href="" ng-click="elementClicked($event)" id="Rough_Plumbing__Electrical_PS" class="accordion-anchor ng-binding"><input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Rough Plumbing &amp; Electrical</a>

正如您所看到的那样,当文本未在两侧对齐时,它们会被破坏.我尝试了文本的自动换行,它似乎没有解决这个问题.

根据建议更改css之后,这就是现在的样子.