¿Cómo puedo alinear a la izquierda el texto en una tabla de divs para que las filas se distribuyan uniformemente?

Primero, reestructuraría el HTML. Tener un div para cada línea de texto es excesivo. Todo lo que necesita son 4 divisiones y luego párrafos para el texto.

Que contiene div Párrafos
div de tres columnas
para texto

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

En última instancia, esto hará que la edición sea mucho más fácil.

Luego, algunos ajustes simples al CSS hacen que funcione bien:

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

ENLACE DE MUESTRA

Tenga en cuenta que en las columnas de texto alineado a la izquierda, sin colores de fondo, la longitud de la línea del texto alterará su percepción de los anchos de las columnas. A menos que desee justificar cada línea de texto (que no recomendaría), se espera que el borde derecho irregular sea y no debería ser una gran preocupación.

Voy a suponer que debido a que esta lista está en orden alfabético de izquierda a derecha, su estructura html fue tal que cuando el diseño se apila en ventanas más pequeñas estaría en orden alfabético, ya que ese es el orden en html. Sin embargo, para lograr el diseño que desea, usaría consultas de medios para ocultar y mostrar dos listas diferentes. Luego usaría una lista desordenada no en orden alfabético en el html sino visualmente.

Demostración: 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>

No tienes que reescribir tu código

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

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

Esto le dará un texto centrado en el medio. También puede envolver los elementos individuales en otro div y darle al medio un margin: 0 autoy text-align: justifyo algo y el último float: right;.

si desea mantener el texto alineado a la izquierda y solo desea que el borde derecho se toque, simplemente envuelva cada elemento en otro div entre el contenido y .distributor-middleconfigúrelo display: inline-block;para que el div se convierta en la dimensión del contenido y luego configure el medio en margin: 0 auto;y el .distributor-rightatext-align: right;

Estoy de acuerdo con Scott en que "se espera el borde derecho irregular y no debería ser una gran preocupación". No hay nada que pueda hacer al respecto cuando está trabajando con una lista de palabras cuyas longitudes pueden ser completamente variables y cuando está tratando de hacer un diseño receptivo (que creo que indica su código).

En lugar de un método para hacer esto, me he tomado la libertad de mejorar las optimizaciones sugeridas por Scott, con algunas propias. También tengo algunas sugerencias simples para el diseño de esta lista. Lo presentaré en formato de viñetas para facilitar su consumo.

• La lista alfabética debe ordenarse horizontalmente en lugar de verticalmente porque el vínculo visual y la proximidad entre los elementos de la lista fluyen mucho más horizontalmente que verticalmente. (Es posible que ya haya estado planeando esto, pero no lo sé por el contenido de ejemplo generado).

• Tres columnas de cinco, como sugiere Scott, tiene mucho más sentido para mí que cinco filas de tres, debido a cómo se ve en la página. Sin embargo, lo que es más importante, si las cosas se muestran incorrectamente en algún navegador antiguo, el daño probablemente será mucho peor con las 5 filas de 3 que con las 3 columnas de 5.

• ¡Los flotadores deben evitarse a toda costa! Pasé mucho tiempo usando flotantes y buscando una alternativa debido a los terribles errores en algunos IE y las molestas soluciones necesarias. ¡Existen alternativas y funcionan mucho mejor! Yo personalmente opto por aplicar las propiedades de la tabla a los elementos a través de CSS.

• Para enfatizar mi punto, las propiedades de la tabla CSS incluso se degradan muy bien y son compatibles con IE5. Si el contenido está aplastado o sucede algo extraño, el navegador aún mostrará el contenido de la tabla marcado con CSS sin importar qué. Se desbordará y hará lo que sea necesario, otorgando la máxima prioridad a la visualización del contenido en un elemento tabular, especialmente el contenido de texto (a veces sacrificar imágenes para mostrar texto).

• Un poco más de espacio en blanco entre los elementos de la lista parece desviar un poco el enfoque del borde derecho irregular, al menos en mi cabeza. Usé una altura de línea de 1.5

• Colocar el borde redondeado en el <section>elemento es una mala idea, porque los bordes redondeados son más compatibles que HTML5 (creo), así que lo moví al elemento secundario directo del elemento <section>, con el mismo resultado.

Aquí están mis optimizaciones

El HTML:

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

El 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;
}