如何对齐我的内容

我几乎成功地使对齐的HTML和CSS，但写“今天”和“昨天”之间的内容不对齐。我希望它看起来像一张桌子。现在它写入“今天”，只是打包内容，以便下一行看起来不会调整。如何对齐我的内容

.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细胞但事情变得更糟。你可以帮我吗？

我希望它看起来像这样（样机）

请问如果我行和单元格工作？

来源

2016-07-14 Niklas Rosencrantz

对不起，你在哪里尝试对齐日期和时间？ –

@Unifx是的，我希望它看起来像一张桌子，但它写入“今日”的第一行与下一行不一致，请看截图，我希望你明白我在做什么。 –

.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%; 
    } 
}

来源

2016-07-14 23:29:15

:-)是的！非常感谢。 –

@ Programmer400您的欢迎:) - 但是我会考虑设置一个您自己的网格系统。甚至使用引导程序 –

如何对齐我的内容

回答

相关问题