如何进行响应2/3行

Question

关于从w3schools.com了解移动优先响应，在本节W3.CSS Built-In Responsiveness➡"The w3-twothird Class"中，我很难理解这两行w3-twothird]的CSS样式是什么>和w3-third。我得到一个在同一行中占其宽度的66％，另一个占33％宽度。

我没有得到的是如何将其编辑到自己的样式表中，以找到所需宽度的任意行。或只是一般而言，首先如何将它们放入我的网页。

现在，它看起来有点尴尬，如下所示，但是CSS是什么，以便我可以自己设置样式。这是我要问的问题。它只是给出了一个已经预制好的样式表的链接，看起来有点凌乱，所以我在这里迷路了。

.w3-twothird {
  width: 66%;
  background: red;
}

.w3-third {
  width: 33%;
  background: cyan;
}

@media only screen and (max-width: 600px) {
  .w3-twothird .w3-third {
    display: block;
    width: 100%;
  }
}

/* In my mind this is what I'm thinking but the tutorial doesn't show us how to do it! This is so confusing and I have no idea where to begin! */
<div class="w3-row w3-border">
  <div class="w3-twothird w3-container w3-red">
    <h2>w3-twothird</h2>
    <p>The w3-twothird class uses 66% of the parent container.</p>
    <p>On screens smaller than 601 pixels it resizes to full screen.</p>
  </div>
  <div class="w3-third w3-container">
    <h2>w3-third</h2>
    <p>The w3-twothird class uses 33% of parent container.</p>
    <p>On screens smaller than 601 pixels it resizes to full screen.</p>
  </div>
</div>
<br>

<div class="w3-row w3-border">
  <div class="w3-third w3-container">
    <h2>w3-third</h2>
    <p>The w3-twothird class uses 33% of parent container.</p>
    <p>On screens smaller than 601 pixels it resizes to full screen.</p>
  </div>
  <div class="w3-twothird w3-container w3-red">
    <h2>w3-twothird</h2>
    <p>The w3-twothird class uses 66% of the parent container.</p>
    <p>On screens smaller than 601 pixels it resizes to full screen.</p>
  </div>
</div>

关于从w3schools.com了解移动设备的第一响应能力，在本节中的W3.CSS内置响应能力➡“ w3-twothird类”中，我很难理解...）]

Answer 1

我不确定我是否完全理解您的问题。

在文档的开头，您需要包括一个视口元标记，还需要导入w3.css文件，或下载一个副本并将其上传到您的网站。这个CSS文件包括w3-twothird和w3-third列的样式，以及其他许多样式。有关更多详细信息，请参见https://www.w3schools.com/w3css/default.asp。