How to align my content
Niklas R.
I almost succeeded making aligned html and css but between writing "today" and "yesterday" the content is not aligned. I want it to look like a table. Now it writes "Today" and just packs the content so that the next row doesn't look adjusted.
.ui.left.floated {
min-width: 80px;
}<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<body>
<div id="wrapper"> <div class="ui top attached tabular menu">
<a class="item active" data-tab="first">All</a>
<a class="item" data-tab="second">Company</a>
<a class="item" data-tab="third">Private</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
<div class="ui divided items">
<div style="margin-top:10px!important" class="item">
<div class="ui left floated">
Today
<br>3:28
</div>
<div class="image">
<a href="/vi/5773759738806272.html">
<img src="http://lh3.googleusercontent.com/rVL0kUVl6aHzOiyiz5fWq0YZcwALQdrqn2Vf0DWW0R5OvClZgYj5S4_VoQUajZC54gxlQxgP6NZUr3f9pALqzw3EyQ=s150" title="Get Opencart Development Services from TRS Software Solutions" alt="Get Opencart Development Services from TRS Software Solutions">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5773759738806272.html">
Get Opencart Development Services from TRS Software Solutions </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>TRS Software Solutions is leading ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Lakeland</div>
<div class="ui label">Florida</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
Yesterday
<br>3:44
</div>
<div class="image">
<a href="/vi/5329266862456832.html">
<img src="http://lh3.googleusercontent.com/QQ0YVYpyC5LGhKzpXGlkh-hzQuoYnkDTk4IHtyRKoREVStKOUBrsSH7IdtIZr1F-bXJb38gPRCRtNZuDDROpIOSbO6w=s150" title="Learn jQuery and JavaScript by creating an apple style thumb Slider" alt="Learn jQuery and JavaScript by creating an apple style thumb Slider">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5329266862456832.html">
Learn jQuery and JavaScript by creating an apple style thumb Slider </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Originally started as a programming ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Other city</div>
<div class="ui label">Massachusetts</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
12 July.
<br>0:42
</div>I tried making a row with cells with semantic-ui but that made things worse. Can you help me?
I want it to look like this (mockup)
Will it work if I make rows and cells?
Michael Mano
.ui.left.floated {
min-width: 80px;
}
I am sorry is this what you are after? this will make sure that all the images are aligned? make it 100px as if the date is say.. 31 September (longer wording)
Below is the grid system I use for these sorts of things.
/*________ GRID ________*/
.grid {
margin: 0 auto;
overflow: hidden;
margin-left: -30px;
}
.grid > div {
float: left;
min-height: 1px;
padding-left: 30px;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid .third {
width: 33.33%;
}
.grid .halve {
width: 50%;
}
and so on. then when you get down to smaller sizes eg mobiles.
@media (max-width: 740px) {
.grid .third {
width: 100%;
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Query based on index value or value in a column in python
- Next: Hide page name in url using htaccess in php
Related
Related Related
- 1
How to align content of a div to the bottom
- 2
How to align left dl content?
- 3
How to align an icon to the right of content
- 4
How to align content to the center of the page?
- 5
my div content wont align left as my css specifies
- 6
How to align my JTextField to center
- 7
How to vertical align my tag in my case
- 8
How to centre align the content of windows form application?
- 9
How to align side bar beneath content if not floated
- 10
How to center align/center parallax scrolling content?
- 11
How to vertical align (center) the content of UITableView?
- 12
How to align the content of two divs vertically?
- 13
how to align repeater control item template content
- 14
How to align side bar beneath content if not floated
- 15
How to align image content on stackpanel in metro app
- 16
How to align a label versus its content?
- 17
How to vertical align (center) the content of UITableView?
- 18
How to align all div content in one line?
- 19
How to align content to middle of container Bootstrap
- 20
How to align content in center using CSS?
- 21
How to align content inside ListView ItemTemplate to the right?
- 22
vertical align not working - want content to be in middle of my div
- 23
vertical align not working - want content to be in middle of my div
- 24
How does flex-wrap work with align-self, align-items and align-content?
- 25
How to align my label and input field
- 26
How to horizontal align texts and image in my case
- 27
How to align text next to my Image in PHP
- 28
How to align my text over an image
- 29
How can I properly align my labels?
Comments