Question

这是我的HTML代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <!-- <div class="stack"> -->

    <!-- Row 1 -->

     <div class="stack">
        <div class="row">
           <div class="col" align="center">
              <span style="font-weight: bold;">States of India</span>
           </div>
           <div class="col"></div>
           <div class="col" align="center">
              <span style="font-weight: bold;">United States</span>
           </div>
        </div> <!-- End of div row class -->


        <div class="row">
           <div class="col" align="center">Tamil Nadu</div>
           <div class="col" align="center">Karnataka</div>
           <div class="col" align="center">California</div>
        </div> <!-- End of div row class -->

        <div class="row">
           <div class="col">
              <div id="bloc11" class="donutSize">row 1 - column 1</div>
           </div>
           <div class="col">
              <div id="bloc12" class="donutSize">row 1 - column 2</div>
           </div>
           <div class="col">
              <div id="bloc13" class="donutSize">row 1 - column 3</div>
           </div>
        </div> <!-- End of div row class -->
        <div class="row">
           <div class="col">
              <div id="bloc21">row 2 - column 1</div>
           </div>
           <div class="col">
              <div id="bloc22">row 2 - column 2</div>
           </div>
           <div class="col">
              <div id="bloc23">row 2 - column 3</div>
           </div>
        </div><!-- End of div row class -->
     </div><!-- End of div stack class -->
  <!-- </div> -->

  <div class="stack2">
  <div class="row">
     <div class="col">United States & India</div>
  </div>
  <div class="row">
     <div class="col">
        <div id="skywalk-module" class="ssSize">United States and India are one of the 2 countries in the world. blah blah b</div>
     </div>
  </div><!-- End of div row class -->
</div><!-- End of div stack2 class -->

</body>
</html>

的CSS：

.stack .row,
.stack2 .row {
    clear: both
}

.stack .row .col,
.stack2 .row .col {
    float: left;
    height: auto;
    border: 1px groove
}

.stack .row .col {
    width: 33%;
    align-items: center
}

.stack2 .row .col {
    width: 99%;
    align-items: center
}

.donutSize {
    width: 160px;
    height: 160px;
    margin: 0 auto
}

需要在“泰米尔纳德邦”和“卡纳塔克邦”之间加入“印度国”。这里也不需要边框，将它对齐到中心，当我们使用html表时，就像“colspan = 2”。
我想在“印度国家”，“美国”和“卡纳塔克邦”之上有一条思考线。（见图片标签：这里需要考虑边界线）

3.我想要最后2行，宽度与前4行在同一行。宽度不一样。正如您所看到的，最后2行与前4行的宽度不同，宽度略小（参见图片标签：直线对齐）

我想使用DIV标签，并且不想因为我自己的原因使用表格。我可以使用与div标签一起使用的表。我需要每个容器的div标签，例如印度，美国，泰米尔纳德邦，卡纳塔克邦等国家。

我无法解决这个问题。请帮忙。

这是我在JSBIN中的代码。

http://jsbin.com/fasacu/4/edit?html,css,output

Answer 1

我遵循了@Quantastical +其他一些堆栈溢出答案的建议。

HTML代码：

    <!-- Row 1 -->

     <div class="div-table">
        <div class="div-table-row">
           <div class="div-table-col1" align="center">
              <span style="font-weight: bold;">States of India</span>
           </div>
           <div class="div-table-col" align="center">
              <span style="font-weight: bold;">United States</span>
           </div>
        </div> <!-- End of div row class -->
  </div>

        <div class="div-table">
        <div class="div-table-row">
           <div class="div-table-col3" align="center">Tamil Nadu</div>
           <div class="div-table-col3" align="center">Karnataka</div>
           <div class="div-table-col3" align="center">California</div>
        </div> <!-- End of div row class -->

        <div class="div-table-row">
           <div class="div-table-col3">
              <div id="bloc11" class="donutSize">row 1 - column 1</div>
           </div>
           <div class="div-table-col3">
              <div id="bloc12" class="donutSize">row 1 - column 2</div>
           </div>
           <div class="div-table-col3">
              <div id="bloc13" class="donutSize">row 1 - column 3</div>
           </div>
        </div> <!-- End of div row class -->
        <div class="row">
           <div class="div-table-col3">
              <div id="bloc21">row 2 - column 1</div>
           </div>
           <div class="div-table-col3">
              <div id="bloc22">row 2 - column 2</div>
           </div>
           <div class="div-table-col3">
              <div id="bloc23">row 2 - column 3</div>
           </div>
        </div><!-- End of div row class -->
     </div><!-- End of div table class -->
  <!-- </div> -->

   <div class="div-table">
  <div class="div-table-row">
     <div class="div-table-col2">United States & India</div>
  </div>
  </div>
   <div class="div-table">
  <div class="div-table-row">
     <div class="div-table-col2">
        <div id="skywalk-module" class="ssSize">United States and India are one of the 2 countries in the world. blah blah b</div>
     </div>
  </div><!-- End of div row class -->
</div><!-- End of div table class -->

的CSS：

.div-table{
  display:table;         
  width:auto;                        
  border:1px solid  #666666; 
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;         
  border:1px solid  #666666;   
}

.div-table-col3{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;         
  border:1px solid  #666666;   
}

.div-table-col1{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;          
  width:400px;
  text-align:center;
  border:1px solid  #666666;   
}

.div-table-col2{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:600px;         
  border:0px solid  #666666;   
}

这是链接： http://jsbin.com/fasacu/15/edit?html,css,output

Answer 2

我建议使用table元素和与之关联的单元格元素而不是div标签。例如，对于表格列标题：

<table>
    <tr>
      <th colspan="2">India</th>
      <!--table header cells by default center text both horizontally and vertically.-->
    </tr>
</table>

对齐，：

<table>
  <tr>
  <th>header</th>
  <th>header2</th>
  <th>header3</th>
  </tr>
  <tr>
    <td colspan="3">text string</td>
  </tr>
</table>

对于边框，可以使用css为表格设置样式。您可以添加单元格间距，为单元格和表格本身设置不同的边框样式等。

有趣的是你使用div而不是table元素来组织信息。 table元素保持整洁，而不是每个以“div”开头的标记，您可以识别哪些元素影响行（tr），标题单元格（th）和数据单元格（td）。祝你有个愉快的一周。

HTML对齐问题：使用div：float标记创建行和列

2 个答案: