Question

我想将页面分成三个块，每个块必须保持纵横比（16：9），其中两个必须并排，第三个应该在它们之下。我实现了它，但两个第一块之间有空白区域。我该如何删除它？

HTML和CSS：

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
        width: 100%;   
        min-width: 100%;
      }
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.wrapper2 {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper2:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
.main2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: green;
  /* let's see it! */
  color: white;
}
.main3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: orange;
  /* let's see it! */
  color: white;
}

<body>

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>
<div class="wrapper">
  <div class="main2">
    div2.
  </div>
</div>
<div class="wrapper2">
  <div class="main3">
    This is your div with the specified aspect ratio.
  </div>
</div>

Answer 1

删除inline-block元素之间的空格the most effective and cross-browser solution is to remove the newline between the tags。如果您不想让div标签触摸，实现这一目标的一种方法是添加填充换行符的HTML注释。

直播示例：

＆＃13;

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
        width: 100%;   
        min-width: 100%;
      }
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.wrapper2 {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper2:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
.main2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: green;
  /* let's see it! */
  color: white;
}
.main3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: orange;
  /* let's see it! */
  color: white;
}

＆＃13;

<body>

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div><!--
--><div class="wrapper">
  <div class="main2">
    div2.
  </div>
</div>
<div class="wrapper2">
  <div class="main3">
    This is your div with the specified aspect ratio.
  </div>
</div>

＆＃13;

为什么这两个div之间有空格？

1 个答案: