Question

我问这个是因为我看到了与我here非常相似的问题。具有

<div id="grand">
    <ul id="parent">
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
    </ul>
</div>

可以将child相对（以％单位表示）的css宽度设置为grand，完全忽略父级宽度的值。例如：

#child{ width: 25% of grand's width }

添加了一些解释：

考虑一下：

parent中有child个，我们只想显示4个主题，这样它们的宽度应为grand的25％。

#grand{
    width: 900px;
    overflow: hidden
}
#parent{
    width: 9999px;
}
.child{
    width: 900px;
    width: 25% of grand's width
}

Answer 1

您也可以使用％来调整父级的大小;），因此可以更容易地确定可以看到多少/多个孩子。

＆＃13;

<div id="grand">
  <ul id="parent">
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
  </ul>
</div>

＆＃13;

class StudentDAOImpl implements StudentDAO {
   public Student findById(int studentId) {
       // some code here to get student
   }
}

class SemesterEnrollmentImpl implements SemesterEnrollmentDAO {
   public SemesterEnrollment findSemesterEnrollmentByStudent(int studentId) {
       // delegating finding of student to StudentDAO
       StudentDAO studentDao = new StudentDaoImpl();
       Student student = studentDAO.findById(studentId);

       // code to get SemesterEnrollment using student instance
   }
}

＆＃13;

Answer 2

事实上，你可以，但要求祖父母有position:relative和绝对定位孙子。

我怀疑这是一个边缘案例，但它是可能的。

＆＃13;

#grand {
  padding: 5%;
  width: 80%;
  border: 1px solid red;
  position: relative;
}
#parent {
  height: 150px;
  width: 60%;
  background: red;
  margin: auto;
}
#child {
  height: 100px;
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  background: blue;
  color: white;
}

＆＃13;

<div id="grand">Grand
  <div id="parent">Parent
    <div id="child">Child</div>
  </div>
</div>

＆＃13;

Answer 3

你可以使用em单位。这不需要JavaScript或必须绝对定位。

如果要显示某些文本内容，请在内容范围/ div中重新设置字体大小。

http://jsbin.com/xibocodaba/edit?html,css,output

＆＃13;

div
{
  height:100%;
}

#grand
{
  font-size:300px;
  border:1px solid blue;
  width:1em;
  height:30px;
}

#parent
{
  border:1px solid red;
  width:.1em;
}

#child
{
  border:2px solid gold;
  width:.25em;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="grand">
    <div id="parent">
        <div id="child">
          
        </div>
    </div>
</div>
</body>
</html>

＆＃13;

相对于父级父级的css大小

3 个答案: