Question

我有一个网站，可以根据数据库中的数据生成唯一行。有源名称，然后是有关该行的一些文本。我正在努力实现的目标：

SOURCE NAME     |     This is some demo text
SOURCE NAME     |     This is some demo text
SOURCE NAME 2   |     This is some demo text
SOURCE NAME 3   |     This is some more demo text

当前发生的情况：

SOURCE NAME number 1    |     This is some demo text
SOURCE NAME number 23    |     This is some demo text
SOURCE NAME number 4357   |     This is some demo text
SOURCE NAME number 1111111   |     This is some more demo text
SOURCE NAME number 55    |     This is some demo text
SOURCE NAME number 639    |     This is some demo text

您可以看到，由于源名称文本的长度不同，这导致右侧的文本从行中的不同点开始。我们希望所有文本都从每一行的同一点开始，以便对齐。

对于粗体文本，我为其分配了一个CSS类，如下所示：

.styling {
  font-size: 13px;
  padding-top: 3px;
  margin-left: auto;
}

HTML：

{{i['source']}}<div class="styling"><b>{{i['title']}}</b></div>

Answer 1

您可以使用display:table属性，使div的行为类似于HTML表。

请参阅文档https://www.w3schools.com/cssref/pr_class_display.asp

.listing  {
  display: table;
}
.listing > div {
  display: table-row;
}
.listing > div > span {
  display: table-cell;
}
.listing > div > span:nth-child(2):before {
  content: '| ';
}

<div class="listing">
  <div><span>SOURCE NAME number 1</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 23</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 4357</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 1111111</span><span>This is some more demo text</span></div>
  <div><span>SOURCE NAME number 55</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 639</span><span>This is some demo text</span></div>
</div>

Answer 2

flexbox可以解决这个问题。

.flex-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;  
    width: 300px;
}

.flex-row > .item:nth-of-type(1) {
    flex: 1 1 auto;
    text-align:right;
    min-width: 90px;
    max-width: 90px;
}
.flex-row > .item:nth-of-type(2) {
    flex: 1 1 auto;
    align-self:flex-start;
    min-width: 20px;
    max-width: 20px;
    text-align:center;
}
.flex-row > .item:nth-of-type(3) {
    flex: 1 1 auto;
    min-width: 90px;
    max-width: 90px;
}

<div class="flex-row">
  <span class="item">
  foo
  </span>
  <span class="item">
  |
  </span>
  <span class="item">
  bar
  </span>
</div>

<div class="flex-row">
  <span class="item">
  f
  </span>
  <span class="item">
  |
  </span>
  <span class="item">
  b
  </span>
</div>

<div class="flex-row">
  <span class="item">
  foofoofoofoo
  </span>
  <span class="item">
  |
  </span>
  <span class="item">
  barbarbarbar
  </span>
</div>

Answer 3

您可以使用如下表格：

table {
    border-collapse: collapse;     /* <-- don't want border */
    /* border: 1px solid black;       <-- want border */
    width: 100%;
}

th, td {
    padding: 5px 15px;  /* add some padding */ 
}

table, td, th {    
    /* 
     * use this if you want border around table and cells
     * border: 1px solid #808080; 
     */
}

<table>
  <tr>
    <td>SOURCE NAME</td>
    <td>This is some demo text</td>
  </tr>
  <tr>
    <td>SOURCE NAME</td>
    <td>This is some demo text</td>
  </tr>
  <tr>
    <td>SOURCE NAME 2</td>
    <td>This is some demo text</td>
  </tr>
  <tr>
    <td>SOURCE NAME 3</td>
    <td>This is some more demo text</td>
  </tr>
</table>

Answer 4

您可以通过多种方式进行操作。

使用表格

<table>
    <tr><td>{{i['source']}}</td><td>{{i['title']}}<td></tr> 
    ... repeat tr
</table>

使用CSS样式

.source{
  display:inline-block;
  width: 200px; /** fixed width **/
}
.title{
  display:inline-block;
  font-weight:bold;
}

<div class="line">
  <div class="source">{{i['source']}}</div>
  <div class="title">{{i['title']}}</div>
</div>

您可能需要调整CSS以获得所需的外观和行为。

设置行中元素的间距

4 个答案: