是这样的可以在没有< table> [英] is such alignment achievable without <table>?

问题描述

问候。我的目标是如附图所示的对齐（左边的字段可以有任何宽度，但右边的字段应该从同一个 X 坐标开始）。

现在我使用一个简单的表格代码来实现：

 < table>< tr> 
< td> Left1< / td>< td>右1< / td>< / tr> 
< tr>< td>左2< / td>< td>右2< / td>< / tr>< / table& 
  

但是，我听说使用表通常不好。有没有办法我可以实现相同的设计使用CSS？

EDIT ：由于这个网站是为移动设备设计的，因此可能不支持优秀的CSS，因此代码必须尽可能简单。我仍然偶尔会得到一个通知这个问题的人（大概）刚开始使用HTML，就像我是当时，我参考BT接受的答案，因为这是迄今为止，实现这个功能的最好的方法。建议作为可能的重复的问题（2016年5月31日）目前不提供基于表格/表格列CSS的方法，并要求您进行猜测工作。

解决方案

我发现一个更容易的方法来做这个意外。假设您有以下：

 < div class ='top'> 
< div>其他内容< / div> 
< div class ='a'> 
< div>一些文字1< / div> 
< div>一些文字2< / div> 
< / div> 
< div class ='a'> 
< div>一些文字3< / div> 
< div>一些文字4< / div> 
< / div> 
< / div> 
  

您可以对齐某些文本1 code>一些文本2 使用css表显示样式如下：

  .a { 
 display：table-row; 
} 
 .a div {
 display：table-cell; 
} 
  

最酷的是，只要'top' display：table ，那么在对齐方面可以忽略其他类似Something else。如果'top'div IS样式为 display：table ，那么一些文本1将与其他的对齐（即它对待所有的孩子，即使他们有不同的显示风格）。

这在Chrome中工作，不知道它应该是这样的行为，但我很高兴它的工作。 p>

  .a {display：table-row; } .a div {display：table-cell; }  

 < div class ='top'> < div>其他内容< / div> < div class ='a'> < div>一些文字1< / div> < div>一些文字2< / div> < / div> < div class ='a'> < div>一些文字3< / div> < div>一些文字4< / div> < / div> < / div>  

Greetings. My goal is an alignment as shown in the attached image (the fields on the left may have any width, but the ones on the right should begin at the same X coordinate).

Right now I am using a simple table code to achieve this:

<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>

However, I've heard that using tables is generally bad. Is there a way I could achieve the same design using CSS? The website is being designed for mobile devices which might not support fancy CSS, so the code must be as simple as possible.

EDIT: since I still occasionally get a notification on this question from people who (presumably) are just starting out with HTML like I was when I made it, please refer to the accepted answer by B T as this is by far the best way to achieve this functionality. The question suggested as a "possible duplicate" (31 May 2016) does not currently offer the table-row/table-column CSS-based approach and requires you to do guess work.

解决方案

I found a much easier way to do this by accident. Say you have the following:

<div class='top'>
  <div>Something else</div>
  <div class='a'>
    <div>Some text 1</div>
    <div>Some text 2</div>
  </div>
  <div class='a'>
    <div>Some text 3</div>
    <div>Some text 4</div>
  </div>
</div>

You can align Some text 1 and Some text 2 using css table display styling like this:

.a {
  display: table-row;
}
.a div {
  display: table-cell;
}

The coolest thing is that as long as the 'top' div is NOT styled display: table, then other things like "Something else" can be ignored in terms of alignment. If the 'top' div IS styled display: table, then "Some text 1" will be aligned with "Something else" (ie it treats all its children like table rows, even if they have a different display style).

This works in Chrome, not sure if its supposed to behave this way, but I'm glad it works.

  .a {
      display: table-row;
    }
    .a div {
      display: table-cell;
    }

   <div class='top'>
      <div>Something else</div>
      <div class='a'>
        <div>Some text 1</div>
        <div>Some text 2</div>
      </div>
      <div class='a'>
        <div>Some text 3</div>
        <div>Some text 4</div>
      </div>
    </div>

这篇关于是这样的可以在没有< table>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！