Question

如何更改代码以创建新类：div-table-col中的标题和正文以及内部的align属性？标头必须向右移动，而测试必须向左移动。

      .div-table { 
        display: table; 
        width: 100%; 
        background-color: #eee; 
        border: 1px solid #666666; 
        border-spacing: 5px; }
        
      .div-table-row { display: table-row; width: auto; clear: both; }

      .div-table-col { float: left;  display: table-column; width: 50%; background-color: #ccc; }

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-col" align="right">
       Header: 
    </div>
    <div class="div-table-col" align="left" padding-left="5px">
        Test
    </div>
  </div>
</div>

我要创建：

          .div-table { 
            display: table; 
            width: 100%; 
            background-color: #eee; 
            border: 1px solid #666666; 
            border-spacing: 5px; }
            
          .title { display: table-row; width: auto; clear: both; align:right}

          .data { float: left;  display: table-column; width: 50%; background-color: #ccc; align:left     padding-left:5px}

但是它不起作用。现在它可以正确替换，但是我想删除align属性和padding-left并将其移至样式。

Answer 1

我不知道我是否了解您想要的内容，但是如果唯一的事情是右侧的Header和左侧的Test，则需要制作另一个浮动对象，因为您要对两个对象都应用相同的浮动对象。 / p>

.div-table { 
        display: table; 
        width: 100%; 
        background-color: #eee; 
        border: 1px solid #666666; 
        border-spacing: 5px; }
        
      .div-table-row { display: table-row; width: auto; clear: both; }

      .div-table-col2 { float: left;  display: table-column; width: 50%; background-color: #ccc; }
      
      .div-table-col { float: right;  display: table-column; width: 50%; background-color: #ccc; }

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-col" align="right">
       Header: 
    </div>
    <div class="div-table-col2" align="left" padding-left="5px">
        Test
    </div>
  </div>
</div>

如何显示align div？

1 个答案: