Question

如何在同一个div中给css获取如下页面。我在第二阶段中使用更多子部件以下列方式获得数据。

                                              abcde
                       a production           productions
                                              limited 
   total
                                              jackson 
                       b productions          productions
                                              limited

我正在使用的代码如下所示。

CSS

.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
    margin:0 10px 0 0;

    word-wrap:break-word;

   }
.text_right22 {
width: 20%;
float:left;
text-align:center;

}
.text_right23 {
width: 55%;
float:left;

}

html as

<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div> 
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>

但如果有更多的子部件

则数据不会发生冲突

Answer 1

如果你使用带有rowspan的表会更容易..而且css可以用来调整单元格的宽度和边距这里是代码

<!DOCTYPE html>
<html>
<body>


<table >

<tr>
  <td rowspan="9">total</td>

</tr>
<tr>
  <td rowspan="4">a production</td>


</tr>

<tr>
<td>abcde</td>


</tr>
<tr>
<td>productions</td>


</tr>
<tr>
<td>limited</td>


</tr>

<tr>
  <td rowspan="4">a production</td>


</tr>
<tr>
<td>jackson</td>


</tr>

<tr>
<td>productions</td>


</tr>
<tr>
<td>limited</td>


</tr>


</table>


</body>
</html>

output

如何为后续数据提供css

1 个答案: