Правильное выравнивание CSS-полей

Question

У меня очень простая проблема на моей веб-странице.

Во-первых, здесь мои HTML и CSS сниппеты:

.middle-side p span.two { 
 
\t margin: 0 0em 0 1em; 
 
} 
 
.middle-side p span.bath8 { 
 
    margin: 0 56% 0 0; 
 
} 
 
.middle-side p span.bath7 { 
 
    margin: 0 46% 0 0; 
 
} 
 
.middle-side p span.bath6 { 
 
    margin: 0 36% 0 0; 
 
} 
 
.middle-side p span.bath5 { 
 
    margin: 0 37% 0 0; 
 
} 
 
.middle-side p span.bath3 { 
 
    margin: 0 24% 0 0; 
 
} 
 
.middle-side p span.bath2 { 
 
    margin: 0 14% 0 0; 
 
} 
 
.middle-side p span.bath1 { 
 
    margin: 0 32% 0 0; 
 
}

<div class="col-sm-4 middle-side immediate"> 
 
    <h4>Features:</h4> 
 

 
    <p><span class="bath1">Floor</span>:<span class="two"> {{listing.floor}}</span></p> 
 

 
    <p><span class="bath2">Price</span>:<span class="two"> {{listing.price}}</span></p> 
 

 
    <p><span class="bath3">Plot Area</span>:<span class="two"> {{listing.size}}</span></p> 
 

 
    <p><span class="bath4">Number of rooms</span>:<span class="two"> {{listing.rooms}}</span></p> 
 

 
    <p><span class="bath5">Elevator</span>:<span class="two"> {{listing.elevator}}</span></p> 
 

 
    <p><span class="bath6">Air Conditioned</span>:<span class="two"> {{listing.airConditioning}}</span></p> 
 

 
    <p><span class="bath7">Renovated</span>:<span class="two"> {{listing.renovated}}</span></p> 
 

 
    <p><span class="bath8">Balcony</span>:<span class="two"> {{listing.price}}</span></p> 
 
</div>

Это дает:

И я хочу, чтобы это было правильно выровнены, как это :

Как я могу это достичь?

Answer 1

Вы можете определить ширину первого диапазона ребенка «немедленного» класса, как это:

.immediate p span:first-child{ 
    display:inline-block; 
    width:35%; 
} 

This is the example in JSFiddle

Answer 2

Код будет выглядеть примерно так. Адаптировать его к вашей необходимости:.

<div class="box1"> 
    <table width="100%" border="0" cellpadding="3" cellspacing="0"onMouseover="changeto(event, '#D0DFEC')" onMouseout="changeback(event, '#ffffff')"width="100%"> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Floor:</strong></td> 
      <td><font color="0075DB">5th</font></td> 

     </tr> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Price:</strong></td> 
      <td><font color="0075DB">150,000€</font></td> 

     </tr> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Plot Area:</strong></td> 
      <td><font color="0075DB">Madrid, Spain</font></td> 

     </tr> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Number of rooms:</strong></td> 
      <td><font color="0075DB">7</font></td> 

     </tr> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Elevator:</strong></td> 
      <td><font color="0075DB">Yes</font></td> 

     </tr> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Air Conditioned:</strong></td> 
      <td><font color="0075DB">No</font></td> 

     </tr> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Renovated:</strong></td> 
      <td><font color="0075DB">Yes</font></td> 

     </tr> 
     <tr style="border-bottom: 1px dotted silver;"> 
      <td><strong>Balcony:</strong></td> 
      <td><font color="0075DB">Yes</font></td> 

     </tr> 

    </table> 
</div> 

я добавил щелчок мыши события, чтобы сделать его выглядеть любитель, также убедитесь, что если вы используете загрузчик, вы выполнить все требования бутстраповских относительно столбцов (инкапсулировать DIV, который содержит столбец в строке и т.д. и т.п.)

This is the example in JSFiddle

Edit: Хотя другое решение является правильным, всегда использовать я бы таблицу для такой этой вещи

Answer 3

Вы можете сделать это ...

.middle-side p span:first-child { 
    display: inline-block; 
    width: 20%; 
} 

.middle-side p span.two { 
    padding-left: 1em; 
} 

http://jsfiddle.net/jonathanzuniga/y3xcg646/

Answer 4

Если вы хотите сохранить структуру, которую вы имеете, правильный подход будет использовать различные таблицы модели значения display собственности. Для лечения div.middle-side в виде таблицы, в p элементы как строки, и span элементы внутри них, как клетки, вы могли бы сделать что-то вроде:

.middle-side { 
    display: table; 
} 
.middle-side p { 
    display: table-row; 
} 
.middle-side p span { 
    display: table-cell; 
} 

См this fiddle.

Answer 5

Возможно, вы захотите рассмотреть вопрос об использовании flexbox.

HTML

Просто оберните толстой кишки в span, так что это не anonymous element, что означает, что не будет styleable или по выбору.

CSS

Заменить код с этим:

.col-sm-4 { 
    display: flex; 
    flex-direction: column; 
} 

.col-sm-4 > p { 
    display: flex; 
    border: 1px solid black; 
} 

.col-sm-4 > p > span:nth-child(1) { 
    flex: 0 0 20%; 
    background-color: aqua; 
} 

.col-sm-4 > p > span:nth-child(2) { 
    flex: none; 
    background-color: pink; 
} 

.col-sm-4 > p > span:nth-child(3) { 
    flex: 1; 
    background-color: yellow; 
} 

Код выше результатов в этом отзывчивым макете:

DEMO

Answer 6

Вы можете использовать структуру CSS вы используете для достижения этой цели:

<style type="text/css" media="screen"> 

.two span{ 
    padding-right:5px; 
} 
</style> 

<div class="row"> 
<div class="col-sm-4 middle-side immediate"> 
    <h4>Features:</h4> 

    <div class="row"> 
     <div class="bath1 col-sm-6">Floor</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.floor}} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="bath2 col-sm-6">Price</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.price}} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="bath3 col-sm-6">Plot Area</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.size}} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="bath4 col-sm-6">Number of rooms</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.rooms}} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="bath5 col-sm-6">Elevator</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.elevator}} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="bath6 col-sm-6">Air Conditioned</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.airConditioning}} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="bath7 col-sm-6">Renovated</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.renovated}} 
     </div> 
    </div> 

    <div class="row"> 
     <div class="bath8 col-sm-6">Balcony</div> 
     <div class="two col-sm-6"> 
     <span>:</span> 
      {{listing.price}} 
     </div> 
    </div> 
</div> 
</div> 

Это позволит сэкономить много времени. Когда вы будете реагировать.