Question

我有嵌套的嵌套div元素，比如这个

<div class="main">
    <div class="sub1">
        <div class="sub2">
            Hello Worlds!!
        </div>
    </div>
</div>

样式为

.main {
    width:200px;
    border-bottom : solid 1px #0000FF;
 }

.sub1 {
    width:300px;
    border-bottom : solid 3px #00FF00;
}

.sub2 {
    border-bottom : solid 3px #FF0000;
}

有没有办法将类“sub2”的边框长度设置为200px即。同类的主要课程？这是example: http://jsfiddle.net/1Lygjmvj/

Answer 1

试试这个：

#main {
   max-width:200px !important;
   border-bottom : solid 1px #0000FF;
}

#sub1 {
    width:300px;
    border-bottom : solid 3px #00FF00;
}
#sub2 {
    width:200px;
    border-bottom : solid 3px #FF0000;
}

Answer 2

执行此操作的最佳方法是将 .sub2 宽度设置为 200px 。您知道 .main 元素的宽度，因此不需要以其他方式执行此操作。

你的风格应如下所示：

.main {
    width:200px;
    border-bottom : solid 1px #0000FF;
 }

.sub1 {
    width:300px;
    border-bottom : solid 3px #00FF00;
}

.sub2 {
    border-bottom : solid 3px #FF0000;
}

但是，如果你真的，真的需要这样做取决于 .main 宽度，因为你的顶级父div没有固定的宽度你必须在Javascript中这样做。例如，如果您使用的是JQuery，则可以使用此代码：

$(function () {
    var list = $(".sub2");
    for (var i = 0; i < list.length; i++) {
        $(list[i]).width( $(list[i]).parent().parent().width() );
    }
});

当页面加载时，此代码会将包含类 .sub2 的所有元素的宽度设置为其父级宽度的父级。

Answer 3

您可以在sub2之后添加一个空元素，并将sub1的样式移到其中：

＆＃13;

#main {
  width:200px;
  border-bottom : solid 15px blue;
}

#sub2 {
  border-bottom : solid 13px red;
}

#sub3 {
  width:300px;
  border-bottom : solid 10px green;
}

＆＃13;

<div id="main">
  <div id="sub1">
    <div id="sub2">
      Hello Worlds!!
    </div>
    <div id="sub3"></div>
  </div>
</div>

＆＃13;

CSS嵌套元素中特定长度的边框

3 个答案: