Question

我正在HTML和CSS合作，对CSS不太熟悉。我面临的问题是省略了单元格（9＆10）和单元格（11＆12）之间的宽度。我已将HTML代码附加到CSS上。

My desired output is as shown. Color doesn't matters

如果我将padding-left的值设置为width的值，则可以保持单元格之间的空间。但是我不想使用它，因为在其他单元格中无需设置padding-left值即可对其进行维护。

.Csstestbodybg {
  background-color: #fff;
}

div.div3 {
  z-index: 0;
  overflow: auto;
  position: relative;
  width: 70.75%;
  margin-left: auto;
  margin-right: auto;
}

.f1 {
  font-family: Arial;
  font-size: 0.8333em;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-decoration: none;
  line-height: 100%;
}

.c1 {
  color: #000000;
}

div.Csstestflex-container1 {
  width: 100%;
  display: -webkit-flex;
  display: flex;
}

div.Scenario12_Table1_div5 {
  background-color: green;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 16.67%;
  display: block;
  float: left;
  clear: left;
  border: 0px;
  width: 16.67%;
}

div.Scenario12_Table1_div6 {
  background-color: yellow;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 0.00%;
  display: block;
  float: left;
  clear: right;
  border: 0px;
  width: 16.67%;
}

div.Scenario12_Table2_div7 {
  background-color: green;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 100.00%;
  display: block;
  float: left;
  clear: left;
  width: 50.00%;
}

div.Scenario12_Table2_div8 {
  background-color: yellow;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 0.00%;
  display: block;
  float: left;
  clear: right;
  width: 50.00%;
}

div.Scenario12_Table2_div9 {
  background-color: green;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 100.00%;
  display: block;
  float: left;
  clear: left;
  width: 50.00%;
}

div.Scenario12_Table2_div10 {
  background-color: yellow;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 0.00%;
  display: block;
  float: left;
  clear: right;
  width: 50.00%;
}

<body class="cssbody cssbodybg">
  <div class="Page24852 Csstestdiv div3" name="Section">
    <div>Table Style:<br>&#160;</br>
    </div>
    <div class="Csstestflex-container1">
      <div class="Scenario12_Table1_div5">7</div>
      <div class="Scenario12_Table1_div6">8
        <div class="Csstestflex-container1">
          <div class="Scenario12_Table2_div7">9</div>
          <div class="Scenario12_Table2_div8">10</div>
        </div>
        <div class="Csstestflex-container1">
          <div class="Scenario12_Table2_div9">11</div>
          <div class="Scenario12_Table2_div10">12</div>
        </div>
      </div>
    </div>
</body>

Answer 1

您的帖子对期望的输出没有多说，但提到了flex。使用flex的解决方案

@ExtendWith(MockitoExtension.class) //junit5, but junit4 is also possible
public class ApplicationServiceTest {

     @Mock
     private ApplicationRepository applicationRepository;

     @Mock
     private final PasswordEncoder passwordEncoder;

     @InjectMocks
     private ApplicationService sut; //ServiceUnderTest

     // Now write your tests
}

.flex {
  display: flex;
  justify-content: space-around;
  flex: 1 1 auto;
  text-align: center;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

显示表格内容时出现问题

1 个答案: