Question

我搜索了论坛，但没有发现任何有助于我解决问题的内容。

如何使用CSS制作一个半屏尺寸与另一半相同？另外，两个半部也应该在开始时填满整个屏幕的高度。

段：

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif
}

body,
html {
  height: 100%;
  line-height: 1.8;
}

.w3-bar .w3-button {
  padding: 16px;
}

.container {
  position: relative;
  width: 90%;
}

.img {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}

<div class="w3-center">
  <div class="w3-row">
    <div class="w3-half w3-container w3-pink">
      <p>Some Text</p>
      <div class="w3-half w3-container">
        <p>Pics and some Text</p>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要指定父元素的高度或宽度，才能获得w3-half类的工作百分比。

在您的代码中，一个w3-half元素是另一个元素的子元素。如果你想让它们两个都是相同的宽度（即父母的50％），他们最好是兄弟姐妹。

这是一个片段，我希望能帮到你：

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif
}

body,
html {
  height: 100%;
  width: 100%;
  line-height: 1.8;
}

.w3-center,
.w3-row {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 4px 0;
}

.w3-half {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 50%;
  margin: 4px 0;
}

.w3-bar .w3-button {
  padding: 16px;
}

.container {
  position: relative;
  width: 90%;
}

.img {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}


/* This below only for test purpose */

.w3-center {
  background: red;
}

.w3-row {
  background: green;
}

.w3-half {
  background: blue;
  box-sizing: border-box;
  border: 2px solid black;
}

<div class="w3-center">
  <div class="w3-row">
    <div class="w3-half w3-container w3-pink">
      <p>Some Text</p>
    </div><div class="w3-half w3-container">
      <p>Pics and some Text</p>
    </div>
  </div>
</div>

编辑：评论后更新。

css w3-half高度相同的问题

1 个答案: