Question

我想将div分为左右两部分。左侧的大小最小为100px，最大为整个宽度的10％。右侧填充了剩余空间。我的代码如下：

{
    "msgid": 102001623621,
    "msg_time": "22/08/2018 12:24:08",
    "msg_flag": "R",
    "msg_category": 1,
    "msg_text": "Message \"Hello Tomtoim!!!\" read",
    "msg_refid": 101930037863,
    "msg_reftype": 2,
    "objectno": "TEST",
    "pos_time": "22/08/2018 12:24:04",
    "pos_text": "",
    "objectuid": "1-44061-6662F76F14"
}

class ExampleFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, 
    savedInstanceState: Bundle?): View? {
        val ui = UI {
            verticalLayout {
                include(id1 < ----??)
                include(id2 < ----??)
            }
        }
    return ui.view
    }
}

但是，我观察到的是，左和右div的宽度均为50％。为什么？

Answer 1

尝试这个

.container {
  display: grid;
  grid-template-columns: minmax(100px ,1fr) 9fr;
}

.left {
  grid-column: 1/2;
}

.right {
  grid-column: 2/3;
}

<html>

<head></head>

<body>
  <div class="container">
    <div class="left">Hi</div>
    <div class="right">Hello</div>
  </div>
</body>

</html>

固定大小和分数之间的CSS网格最小最大值

1 个答案: