Question

这让我发疯了。我想要两个并排的列如下工作：

[Button] [Long text description]       [Button] [Long text description]

我希望按钮的宽度相同，文本不会渗到右侧的列中。我试着这样实现：

multicol {
  display: inline-block;
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
 
}

  <!-- Imagine 20-25 of these in a row -->
  <div class='container-fluid multicol'>
     <div class='row'>
         <div class='col-xs-5'>
              <button class='btn btn-block'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
          </div>
          <div class='col-xs-7'>
               <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
           </div>
      </div>
  </div>

但是我的按钮开始在不同的屏幕分辨率上调整大小，并且它们的大小并不总是相同。无论屏幕分辨率如何，如何确保按钮始终具有相同的宽度（整列）？

Answer 1

我认为你正在努力实现这样的目标：

.col {
    width: 50%;
    float: left;
}
button {
    width: 80px;
    height: 22px;
}

<!-- Imagine 20-25 of these in a row -->
  <div>
     <div class="col">
         <button>One</button>
         <span>Description one</span>
     </div>
     <div class="col">
         <button>One</button>
         <span>Description one</span>
     </div>
     
  </div>

Answer 2

container-fluid设置为整个浏览器的宽度，因此col-xs-5元素将始终有所不同，因为它将占浏览器宽度的百分比。 btn-block将确保该按钮是变量col-xs-5宽度的100％。

如果您希望按钮元素的设置宽度与屏幕分辨率无关，我建议给按钮元素一个明确的宽度，

e.g。

button {
  width: 200px;
}

长按钮文字可能会突破到第二行，但按钮宽度将保持一致。

Answer 3

CSS中有一个相对于视口的单位。您可以将vw用于视口宽度，将vh用于视口高度。

例如，如果您要具有与视口相同的宽度的元素，则可以像这样设置元素的样式：

element {
    width: 100vw;
}

无论屏幕分辨率如何，如何让我的按钮和文字填充列？

3 个答案: