Как выровнять мой контент

Мне почти удалось выровнять 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>

Я попытался сделать ряд с клетками с семантическим-интерфейса, но это сделало вещи хуже. Вы можете мне помочь?

Я хочу, чтобы она выглядела так (макет)

Будет ли это работать, если я делаю строки и ячейки?

источник

2016-07-14 Niklas Rosencrantz

Извините, не пытайтесь ли вы совмещать даты и время? –

@Unifx Да, я хочу, чтобы это выглядело как таблица, но первая строка, где он пишет «Сегодня», не выровнена со следующей строкой, см. Скриншот, и я надеюсь, что вы понимаете, что я пытаюсь сделать. –

.ui.left.floated { 
    min-width: 80px; 
}

Извините, что вы после? это позволит убедиться, что все изображения выровнены? сделайте это 100px, как если бы дата была указана. 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 Ваш прием :) - Однако я бы посмотрел на создание собственной сетки. или даже с помощью бутстрапов –

Как выровнять мой контент

ответ

Смежные вопросы