如何對齊我的內容

我幾乎成功地使對齊的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您的歡迎:) - 但是我會考慮設置一個您自己的網格系統。甚至使用引導程序 –

如何對齊我的內容

回答

相關問題