Question

我正在使用自适应模板，但我的div的宽度有问题，但它们的大小都相同，但它们不应该是code snippet。我尝试了一些东西，但他们都不能工作：/

HTML

<div class="content">
            <div class="col 4">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
            <div class="col 3">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
            <div class="col 3">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
            <div class="col 3">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
        </div>

CSS：

.content {
    width: auto;
    height: auto;
    padding: 10px;
}

.col {
    box-shadow: 0 0 3px #bdc3c7;
    margin: 5px;
}

.col .4 {
    width: 100%;
    float: left;
}

.col .3 {
    width: 33.33333%;
    float: left;
}

.col .2 {
    width: 50%;
    float: left;
}

.col .1 {
    width: 25%;
    float: left;
}

.col .top {
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: #3498db;
}

.col .top h4 {
    padding: 0 10px;
    color: #fff;
}

.col .con {
    width: 100%;
}

.inner {
    padding: 10px;
}

Answer 1

此：

.col .4 {
   width: 100%;
  float: left;
}

.col .3 {
  width: 33.33333%;
  float: left;
}

.col .2 {
  width: 50%;
  float: left;
}

.col .1 {
  width: 25%;
  float: left;
}

应该是这样的：

.col-4 {
  width: 100%;
  float: left;
}

.col-3 {
  width: 33.33333%;
  float: left;
}

.col-2 {
  width: 50%;
  float: left;
}

.col-1 {
  width: 25%;
  float: left;
}

或者这个，这意味着所有col类也有另一个数字类：

.col.col-4 {
   width: 100%;
  float: left;
}

.col.col-3 {
  width: 33.33333%;
  float: left;
}

.col.col-2 {
  width: 50%;
  float: left;
}

.col.col-1 {
  width: 25%;
  float: left;
}

因为它们没有嵌套在col类中。由于不允许以数字开头的课程。

Answer 2

您应该将类名更改为“col-1”，“col-2”......检查this post

另外，你的选择器错了。有了这个：

.col .col-1 {}

您正在尝试使用类“col”访问元素中包含“col-1”类的所有元素。

你应该这样做：

.col.col-1 {}

获取包含两个类的元素。

响应式div具有不同的宽度和边距百分比

2 个答案: