矩形与网格

Question

创建一个看起来像这样的矩形有点困难。我是新手，任何帮助都会很棒！

这是我要重新创建的内容：

我知道如何制作矩形，并且我假设您将矩形分成两部分，其中一个将使用“表”为“名称”，“诊断”等创建行。

#box {
  margin-top: 1%;    
  height: 20px;
  width: 562px;
  border: 1px solid black;
  padding: 100px;
}

.container {
  display: table;
  width: 100%;
}

.left-half {
  position: relative;
  left: 0px;
}

.right-half {
  position: relative;
  right: 0px;
}

Answer 1

解决方案

Flex网格<3它们很棒

我为您提供了三个示例。行，列和其他示例，用于显示弹性框的更多属性。

  

justify-content和align-items是快速对齐内容的绝佳工具。

示例：

/*ExamplE box*/

.example {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  flex-direction: row; /*Direction of flex*/
  justify-content:center; /*horizontally aligns them to center*/
  align-items: center; /*Vertically aligns them to center*/
}

.example__children {
  width: 5px;
  height: 5px;
  margin: 0 5px;
  border: 1px solid black;
}




/*Column box*/
.column {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.column__children {
  width: 100%;
  height: 25%;
  border: 1px solid black;
}




/*Row box*/
.row {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
}

.row__children {
  width: 25%;
  height: 100%;
  border: 1px solid black;
}

<div class="example">
  <div class="example__children"></div>
  <div class="example__children"></div>
  <div class="example__children"></div>
  <div class="example__children"></div>
</div>

<div class="column">
  <div class="column__children"></div>
  <div class="column__children"></div>
  <div class="column__children"></div>
  <div class="column__children"></div>
</div>

<div class="row">
  <div class="row__children"></div>
  <div class="row__children"></div>
  <div class="row__children"></div>
  <div class="row__children"></div>
</div>