Wie kann ich den Text in einer Tabelle mit Divs linksbündig ausrichten, sodass die Zeilen gleichmäßig verteilt sind?

Zuerst würde ich den HTML-Code umstrukturieren. Ein div für jede einzelne Textzeile zu haben, ist übertrieben. Alles, was Sie brauchen, sind 4 divs und dann Absätze für den Text.

Containing div
Dreispaltige divs
Absätze für Text

<div id="wrap">
    <?php include 'menu.php'; ?>

    <div class="inner body">
    <section class="round-border">

        <div class="distributors-row">
            <div class="distributor-left">
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
          </div>
            <div class="distributor-middle">
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p></div>
            <div class="distributor-right">
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p></div>
        </div>
        </section>

    </div>

Letztendlich wird dies die Bearbeitung erheblich erleichtern.

Dann sorgen einige einfache Anpassungen am CSS dafür, dass es gut abgespielt wird:

body {
    background-color: #eee;
    background-image: url(../images/patterns/light_toast.png);
    color: rgba(102, 102, 102, 1);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin:0px;
    padding:0px;
}

.inner {
    margin: 0 auto;
    max-width: 940px;
    padding: 0 40px;
}


.distributors-row > div { 
    float: left;
    width: 33.3%;
    margin-left: none;
    padding: 5px 0;
    text-align: left; } */ one CSS definition for all 3 columns */
p { margin:0; text-indent: 10px; } */ added to move text off left edge slightly */

.round-border {
    border: 1px solid #eee;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 5px;
    clear: both;
}

.round-border:after {
    content: "";
    display: block;
    clear: both;
}

#wrap {
    margin: 0 auto;
}

BEISPIELLINK

Beachten Sie, dass in Spalten mit linksbündigem Text ohne Hintergrundfarben die Zeilenlänge des Textes Ihre Wahrnehmung der Spaltenbreite verändern wird. Wenn Sie nicht jede Textzeile rechtfertigen möchten (was ich nicht empfehlen würde), wird der ausgefranste rechte Rand erwartet und sollte kein großes Problem darstellen.

Da diese Liste von links nach rechts alphabetisch geordnet ist, gehe ich davon aus, dass Ihre HTML-Struktur so war, dass das Design, wenn es auf kleineren Ansichtsfenstern gestapelt wird, in alphabetischer Reihenfolge ist, da dies die Reihenfolge in HTML ist. Um jedoch das gewünschte Design zu erreichen, würde ich Medienabfragen verwenden, um zwei verschiedene Listen ein- und auszublenden. Dann würde ich eine ungeordnete Liste nicht in alphabetischer Reihenfolge im HTML verwenden, sondern visuell.

Demo: http://jsbin.com/kiyora/

.distributors {
    display: none
}
.distributors-list {
    display: block
}
@media (min-width:870px) { 
    .distributors-list {
        display: none
    }
    .distributors {
        width: 100%;
        padding: 10px;
        display: block;
        overflow:hidden;
        margin:0 auto;
        max-width:980px;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid red;
    }
    .distributors .distributor {
        width: 36%;
        padding: 0;
        margin: 0;
        list-style: none;
        float: left;
        box-sizing: border-box;
    }
    .distributors .distributor:nth-child(even) {
        width: 33%
    }
    .distributors .distributor:last-child {
        width: auto;
        float: right;
    }
}

HTML:

<section class="distributors-list">My alpha list for small viewport widths</section>

<section class="distributors">
   <ul class="distributor">
      <li>Egestas Nunc Sed Company</li>
      <li>Hendrerit A Arcu Institute</li>
      <li>Molestie Sed Id Incorporated</li>
      <li>Ut Quam Vel Company</li>
      <li>Donec Egestas Duis LLC</li>
      <li>Tincidunt Nibh Phasellus Company</li>
   </ul>
   <ul class="distributor">
      <li>Egestas Nunc Sed Company</li>
      <li>Hendrerit A Arcu Institute</li>
      <li>Molestie Sed Id Incorporated</li>
      <li>Ut Quam Vel Company</li>
      <li>Donec Egestas Duis LLC</li>
      <li>Tincidunt Nibh Phasellus Company</li>
   </ul>
   <ul class="distributor">
      <li>Egestas Nunc Sed Company</li>
      <li>Hendrerit A Arcu Institute</li>
      <li>Molestie Sed Id Incorporated</li>
      <li>Ut Quam Vel Company</li>
      <li>Donec Egestas Duis LLC</li>
      <li>Tincidunt Nibh Phasellus Company</li>
   </ul>
</section>

Sie müssen Ihren Code nicht umschreiben

.distributor-middle {
    text-align: center;
}

.distributor-right {
    text-align: right;
}

Dadurch erhalten Sie einen zentrierten Text in der Mitte. margin: 0 autoSie können die einzelnen Elemente auch in ein anderes div packen und dem mittleren ein und text-align: justifyoder etwas und dem letzten eins geben float: right;.

Wenn Sie möchten, dass der Text links ausgerichtet bleibt und Sie nur möchten, dass sich die rechte Kante berührt, wickeln Sie einfach jedes Ding in ein anderes Div zwischen dem Inhalt und und setzen Sie es auf, .distributor-middledamit display: inline-block;das Div zur Dimension des Inhalts wird, und setzen Sie dann das mittlere auf margin: 0 auto;und das .distributor-rightzutext-align: right;

Ich stimme Scott zu, dass "der ausgefranste rechte Rand erwartet wird und kein großes Problem sein sollte". Es gibt nichts, was Sie dagegen tun können, wenn Sie mit einer Liste von Wörtern arbeiten, deren Länge völlig variabel sein kann, und wenn Sie versuchen, ein ansprechendes Design zu erstellen (was ich denke, dass Ihr Code darauf hinweist).

Anstelle einer Methode dafür habe ich mir die Freiheit genommen, Scotts vorgeschlagene Optimierungen mit einigen meiner eigenen zu verbessern. Ich habe auch ein paar einfache Vorschläge für die Gestaltung dieser Liste. Ich werde sie im Stichpunktformat darstellen, um den Konsum zu erleichtern.

• Die alphabetische Liste sollte horizontal statt vertikal geordnet werden, da die visuelle Verbindung und Nähe zwischen den Listenelementen imo viel mehr horizontal als vertikal verläuft. (Möglicherweise haben Sie dies bereits geplant, aber ich weiß es nicht aus dem generierten Beispielinhalt).

• Drei Fünferspalten, wie Scott vorschlägt, sind für mich viel sinnvoller als fünf Dreierreihen, da sie auf der Seite aussehen. Noch wichtiger ist jedoch, dass, wenn die Dinge in einem alten Browser falsch gerendert werden, der Schaden mit den 5 Reihen von 3 wahrscheinlich viel größer sein wird als mit 3 Spalten von 5.

• Schwimmer sollten unbedingt vermieden werden! Ich habe lange Zeit damit verbracht, Floats zu verwenden und nach einer Alternative zu suchen, aufgrund der schrecklichen Fehler in einigen IEs und der lästigen Problemumgehungen, die erforderlich sind. Es gibt Alternativen und sie funktionieren viel besser! Ich persönlich entscheide mich dafür, Tabelleneigenschaften per CSS auf Elemente anzuwenden.

• Um meinen Punkt zu betonen, CSS-Tabelleneigenschaften verschlechtern sich sogar sehr gut und werden zurück zu IE5 unterstützt. Wenn Inhalte gequetscht werden oder etwas Seltsames passiert, zeigt der Browser immer noch CSS-markierte Tabelleninhalte an, egal was passiert. Es wird überlaufen und alles Notwendige tun, wobei der Anzeige des Inhalts in einem tabellarischen Element höchste Priorität eingeräumt wird - insbesondere Textinhalt (opfern Sie manchmal Bilder, um Text anzuzeigen).

• Ein bisschen mehr Leerraum zwischen den Listenelementen scheint den Fokus etwas von der ausgefransten rechten Kante abzulenken, zumindest tut es das in meinem Kopf. Ich habe eine Zeilenhöhe von 1,5 verwendet

• Das Platzieren des abgerundeten Rahmens auf dem <section>Element ist eine schlechte Idee, da abgerundete Rahmen breiter unterstützt werden als HTML5 (glaube ich), also habe ich es <section>stattdessen in das direkte untergeordnete Element von verschoben, mit dem gleichen Ergebnis.

Hier sind meine Optimierungen

Der HTML-Code:

<div id="wrap">
  <?php include 'menu.php'; ?>
  <div class="inner">
    <section>
      <div class="container round-border">
        <ol class="column">
          <li>Egestas Nunc Sed Company</li>
          <li>Ut Quam Vel Company</li>
          <li>Praesent Luctus Company</li>
          <li>Malesuada Ut Corporation</li>
          <li>Rutrum Fusce Inc.</li>
          <li>Eget Laoreet LLC</li>
        </ol>
        <ol class="column">
          <li>Hendrerit A Arcu Institute</li>
          <li>Donec Egestas Duis LLC</li>
          <li>Curae; Donec Consulting</li>
          <li>Sit Amet Consectetuer Incorporated</li>
          <li>Iaculis Odio Nam Limited</li>
          <li>Elit Fermentum Risus Institute</li>
        </ol>
        <ol class="column">
          <li>Molestie Sed Id Incorporated</li>
          <li>Tincidunt Nibh Phasellus Company</li>
          <li>Magna A LLC</li>
          <li>Cum Sociis Foundation</li>
          <li>Interdum Libero Dui Institute</li>
          <li>Aliquet Proin Velit Company</li>
        </ol>
      </div>
    </section>
  </div>
</div>

Das CSS:

*, ol, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  vertical-align: middle;
  text-align: left;
}

body {
  background-color: #eee;
  background-image: url(../images/patterns/light_toast.png);
  color: rgba(102, 102, 102, 1);
  font-family: 'Open Sans', sans-serif;
  font-size: medium;
}

#wrap, .inner {
  margin: 0 auto;
}

.inner {
  display: block;
  width: auto;
  max-width: 940px;
}

.container {
  display: table;
}

.round-border {
  border: 0.100em solid #eee;
  border: 0.100em solid rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 0.400em;
  -moz-border-radius: 0.400em;
  border-radius: 0.400em;
  padding: 0.600em;
  margin-bottom: 0.500em;
}

.column {
  display: table-cell;
  width: 33.333333333333333%;
  width: calc(100/3);
}

.column li {
  display: inline-block;
  width: 100%;
  line-height: 1.5;
}