使用getuikit框架扩展第二列

Question

我在一行中有两列。我想要第一列是文本段落，第二列是文本区域。

第一列的宽度是行宽的10%；然后第二个向右扩展。所以我将列放入 uikit 网格中。

通过uikit document，我有下面的代码

<hello name="{{ name }}"></hello>
<p>
   Start editing to see some magic happen :)
</p>
<div uk-grid class="uk-grid">
   <div class="uk-width-1-10" style="background: red;">
     <p>lorem</p>
  </div>
 <div class="uk-width-9-10" style="background: blue;">
   <textarea></textarea>
 </div>
</div>

现在的问题是两列都占整行。宽度不是 10% vs 90%

Please see the demo on stackblize

我想使用 uikit 框架(https://getuikit.com/docs/width)而不是通用的css。

Answer 1

div 是块元素，这意味着它们默认会占据整个宽度。通过在样式属性中定义以下 css 属性来使它们成为内联元素。

display: inline-block;

Answer 2

使用CSS网格布局模块

check this site

.grid-container {
  display: grid;
  grid-template-columns: 10% 90%;
  background-color: #2196F3;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

<div class="grid-container">
  <div class="grid-item">I'm here</div>
  <div class="grid-item" style="text-align: right;"><input type="text"></div>
</div>

使用getuikit框架扩展第二列

Make the second column expand by using getuikit framework

html

javascript

css

getuikit