我几乎成功地制作了对齐的 html 和 css，但是在写“今天”和“昨天”之间内容没有对齐。我希望它看起来像一张 table 。现在它写了“今天”并且只是打包内容，这样下一行看起来就没有调整过。
.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>我尝试用带有语义用户界面的单元格排成一排，但这让事情变得更糟。你能帮帮我吗？
我希望它看起来像这样(模型)
如果我制作行和单元格，它会起作用吗？
最佳答案
.ui.left.floated {
min-width: 80px;
}
对不起，这就是你想要的吗？这将确保所有图像都对齐？把它设为 100px，就好像日期是 .. 9 月 31 日(更长的措辞)
下面是我用于此类事情的网格系统。
/*________ 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%;
}
等等。然后当您使用更小的尺寸(例如手机)时。
@media (max-width: 740px) {
.grid .third {
width: 100%;
}
}
关于css - 如何对齐我的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38385716/