Wie ich meinen Inhalt ausrichten kann

Ich bin fast gelungen, ausgerichtetes HTML und CSS zu machen, aber zwischen dem Schreiben von "heute" und "gestern" ist der Inhalt nicht ausgerichtet. Ich möchte, dass es wie ein Tisch aussieht. Jetzt schreibt es "Heute" und packt einfach den Inhalt, so dass die nächste Zeile nicht angepasst aussieht.Wie ich meinen Inhalt ausrichten kann

.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>

Ich habe versucht, eine Zeile mit Zellen, die mit semantischer-ui zu machen, aber das machte alles noch schlimmer. Kannst du mir helfen?

Ich möchte es so (Mock-up) suchen

Wird es funktionieren, wenn ich Zeilen und Zellen machen?

Quelle

2016-07-14 Niklas Rosencrantz

Entschuldigung, wo versuchst du, die Daten und Zeiten auszurichten? –

@Unifx Ja, ich möchte, dass es wie eine Tabelle aussieht, aber die erste Zeile, in der "Heute" geschrieben wird, ist nicht mit der nächsten Zeile ausgerichtet, bitte sehen Sie den Screenshot und ich hoffe, Sie verstehen, was ich versuche. –

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

Es tut mir leid ist das, wonach Sie suchen? Dadurch wird sichergestellt, dass alle Bilder ausgerichtet sind. Machen Sie es 100px, als ob das Datum ist sagen .. 31 September (längere Formulierung)

Unten ist das Grid-System, das ich für diese Art von Dingen verwenden.

/*________ 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%; 
}

und so weiter. dann, wenn Sie zu kleineren Größen z. B. Handys kommen.

@media (max-width: 740px) { 
    .grid .third { 
     width: 100%; 
    } 
}

Quelle

2016-07-14 23:29:15

:-) Ja! Danke vielmals. –

@ Programmer400 Ihre Begrüßung :) - Wie auch immer ich ein eigenes Raster-System einrichten würde. oder sogar Bootstraps verwenden –

Antwort

Verwandte Themen