Question

我正在尝试制作一个如图所示的盒子。

enter image description here

但是我的小盒子的边框位于大盒子里面，而不是坐在大盒子边框的顶部。

我需要把粉红色的“鸡”小盒子放在灰色大盒子的右上角。

float enableColliderForSeconds = 1f;

void Update()
{
    if (Input.GetButtonDown("Fire1"))
    {
        Col.enabled = false; //in case it is enabled from a canceled Coroutine
        StopCoroutine(Collider()); //canceling Coroutine first to not stack
        StartCoroutine(Collider());
    }
}

IEnumerator Collider()
{
    Col.enabled = true;
    yield return new WaitForSeconds(enableColliderForSeconds);
    Col.enabled = false;
}

Answer 1

2 个简单的选项：

注意：父级和子级的边框不会像在表格布局中那样折叠，它们需要被移除...... 101 问题。

不要绘制右上角的边框（如果颜色相同）

<!DOCTYPE html>
<html>

<head>
  <title>Coursera Assignment 1</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <style type="text/css">
    * {
      box-sizing: border-box;
      margin: 0px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.3;
    }
    
    h2.chicken {
      background-color: #D59898;
      border: 2px solid black;
      border-top:none;
      border-right:none;
      text-align: center;
      width: 100px;
      margin: 0px 10px 0px 0px;
      float: right;
      margin-right: 0px;
    }
    
    div.chicken {
      background-color: grey;
      border: 2px solid black;
      width: 30%;
      position: relative;
    }
    
    p.chicken {
      clear: right;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Our Menu</h1>


  <div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note
      the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
  </div>




</body>

</html>

改用 box-shadow（如果颜色可能不同）

<!DOCTYPE html>
<html>

<head>
  <title>Coursera Assignment 1</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <style type="text/css">
    * {
      box-sizing: border-box;
      margin: 0px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.3;
    }
    
    h2.chicken {
      background-color: #D59898;
      box-shadow: 0 0 0 2px blue ;
      text-align: center;
      width: 100px;
      margin: 0px 10px 0px 0px;
      float: right;
      margin-right: 0px;
    }
    
    div.chicken {
      background-color: grey;
      border: 2px solid black;
      width: 30%;
      position: relative;
    }
    
    p.chicken {
      clear: right;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Our Menu</h1>


  <div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note
      the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
  </div>




</body>

</html>

Answer 2

使用负边距：

    margin: -10px -10px 0px 0px;

完整代码：

        * {
            box-sizing: border-box;
            margin:0px;
            font-family: Helvetica, Arial, sans-serif;
            line-height: 1.3;
        }

        h2.chicken {
            background-color: #D59898;
            border: 2px solid black;
            text-align: center;
            width: 100px;
            margin: -10px -10px 0px 0px;
            float: right;
        }

        div.chicken {
            background-color: grey;
            border: 2px solid black;
            width: 30%;
            position: relative;
        }

        p.chicken {
            clear: right;
            padding: 10px;
        }

    <h1>Our Menu</h1>


<div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
</div>

如何让子div边框覆盖父div边框的角落？

2 个答案: