Reputation: 3100
I have a website that generates unique rows based on data from a database. There is the source name, then some text about the row. What I am trying to achieve:
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
What happens currently:
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
As your can see because of the source name text varying in length this causes the text on the right to start at different points in the row. We would like all of the text to start at the same point in each row so it aligns.
For the text that is bold, I have assigned a CSS class to it as follows:
.styling {
font-size: 13px;
padding-top: 3px;
margin-left: auto;
}
HTML:
{{i['source']}}<div class="styling"><b>{{i['title']}}</b></div>
Upvotes: 0
Views: 41
Reputation: 15559
You can use a table as below:
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>
Upvotes: 1
Reputation: 18575
flexbox will work for this.
.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>
Upvotes: 2
Reputation: 1894
You can do it in several ways.
<table>
<tr><td>{{i['source']}}</td><td>{{i['title']}}<td></tr>
... repeat tr
</table>
.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>
You may need to tweak the CSS to get the desired appearance & behavior.
Upvotes: 1
Reputation: 3809
You can use display:table
property and make your div's behave like a HTML table.
See docs 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>
Upvotes: 3