html - 如何让 w3-cell 不自动调整？

Question

在 HTML 页面上工作需要我并排放置两个元素来复制 50/50 场景之类的东西。我正在使用 w3.css 来帮助我，因为我不太熟悉 HTML/CSS。

我的代码在下面的部分。因此，当 AWords/BWords 变得太大时，单元格会变大，因此它与另一半不匹配。我想问的是如何实现尺寸的统一增加？以便两半相互匹配，中途标记保持在屏幕中间？

<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
        <div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
            <div class="w3-container">
                <p class="AWords w3-xxlarge"></p>
            </div>
            <div class="w3-container">
                <p class="AVotes w3-large"></p>
            </div>
        </div>
        <div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
            <div class="w3-container">
                <p class="BWords w3-xxlarge"></p>
            </div>
            <div class="w3-container">
                <p class="BVotes w3-large"></p>
            </div>
        </div>
    </div>

JSFiddle of what the code currently does

Answer 1

假设“中间”标记指的是垂直分隔两个元素的线，这是因为 W3 使用基于表格的布局。表格会自动展开以包含其内容。

因此，为了确保两个元素占据相同数量的水平空间，您只需给您的单元格一个固定的 width 。这可以通过定位 .w3-cell 来完成:

.w3-cell {
    width: 200px;
}

并且可以在下面看到:

.w3-cell {
  width: 200px;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
  <div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
    <div class="w3-container">
      <p class="AWords w3-xxlarge">Idk what to do</p>
    </div>
    <div class="w3-container">
      <p class="AVotes w3-large"></p>
    </div>
  </div>
  <div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
    <div class="w3-container">
      <p class="BWords w3-xxlarge">If this side gets too big it looks weird</p>
    </div>
    <div class="w3-container">
      <p class="BVotes w3-large"></p>
    </div>
  </div>
</div>

我还创建了一个 Fiddle 来展示这个 here .

请注意，如果您想继续在任何地方使用内联样式，则必须将此应用于两者 <div>具有此类的元素。

希望这有帮助:)