Выравнять текст по одной линии

323

08 августа 2017, 13:51

Доброе утро, как выравнять этот текст (граммовки и цена) по одной линии как на картинке?

Заранее благодарен

Необходимый результат:

Что имеем на данный момент:

div.menu { 
  margin-top: 10px; 
  p { 
    color: #838383; 
    font-size: 18px; 
    font-family: Partner, sans-serif; 
    span.title { 
      font-family: Rodeoc; 
      color: #c42213; 
    } 
    span.gramm { 
      font-size: 15px; 
      font-family: Partner, sans-serif; 
      color: #000; 
      margin-left: 55px; 
    } 
    span.boldertext { 
      font-size: 17px; 
      font-family: Partner, sans-serif; 
      color: #000; 
      font-weight: 600; 
      margin-left: 15px; 
    } 
  } 
  p.text { 
    color: #000; 
  } 
  p.subtext { 
    font-size: 14px; 
    color: #838383; 
  } 
} 
 
p.subtext { 
  font-family: Partner, sans-serif; 
  font-size: 12px; 
  color: #838383; 
} 
 
div.footermenu { 
  position: absolute; 
  background: url("../img/footermenu.png"); 
  width: 120%; 
  height: 78px; 
  right: -50px; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
div.footermenu2 { 
  position: absolute; 
  background: url("../img/footermenu.png"); 
  width: 120%; 
  height: 60px; 
  right: -50px; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
div.submenu { 
  margin-top: 10px; 
  p { 
    font-family: Rodeoc; 
    font-size: 18px; 
    span.ml { 
      font-family: Partner; 
      font-size: 15px; 
    } 
    span.price { 
      font-size: 17px; 
      font-family: Partner, sans-serif; 
      color: #000; 
      font-weight: 600; 
      margin-left: 15px; 
    } 
  } 
}

<div class="col-md-4 col-xs-12"> 
    <h4 class="text-center">КАМЧАТКА</h4> 
    <h1 class="text-center">Рамен</h1> 
 
    <div class="menu"> 
        <p>#7 <span class="title">Торидон</span> <span class="gramm">350г</span> 
            <span class="boldertext">270 р.</span> 
        </p> 
        <p class="text">Рис, филе куриного бедра, соус</p> 
        <p class="subtext">Белки: 9,5г; жиры: 6,2г; углеводы: 25,9г. Калорийность: 195 ккал*</p> 
    </div> 
 
    <div class="menu"> 
        <p>#8 <span class="title">Кацудон</span> <span class="gramm">350г</span> 
            <span class="boldertext">270 р.</span> 
        </p> 
        <p class="text">Рис, свиная отбивная в панировке, капуста</p> 
        <p class="subtext">Белки: 9,5г; жиры: 5,5г; углеводы: 32,1г. Калорийность: 235 ккал</p> 
    </div> 
 
    <div class="menu"> 
        <p>#9 <span class="title">Суп Мисо</span> <span class="gramm">170г</span> 
            <span class="boldertext">60 р.</span> 
        </p> 
        <p class="text">Традиционный японский суп на основе рыбного бульона Хондаши, морских водорослей 
        и соевого сыра Тофу</p> 
        <p class="subtext">Белки: 2,1г; жиры: 1,2г; углеводы: 11,7г. Калорийность: 66 ккал</p> 
    </div> 
 
    <div class="menu"> 
        <p>#10 <span class="title">Салат</span> <span class="gramm">170г</span> 
            <span class="boldertext">55 р.</span> 
        </p> 
        <p class="text">Капуста, морковь, кукуруза, заправка</p> 
        <p class="subtext">Белки: 1,5г; жиры: 1,1г; углеводы: 5,6г. Калорийность: 37,6 ккал</p> 
    </div> 
 
    <div class="menu"> 
        <p>#11 <span class="title">Сет с Гедза</span> <span class="gramm"></span> 
            <span class="boldertext">315 р.</span> 
        </p> 
        <p class="text">Гедза, суп Мисо, салат</p> 
    </div> 
 
    <div class="menu"> 
        <p>#12 <span class="title">Сет с Торидоном</span> <span class="gramm"></span> 
            <span class="boldertext">330 р.</span> 
        </p> 
        <p class="text">Торидон, суп Мисо</p> 
    </div> 
 
    <div class="submenu"> 
        <p>Чай в ассортименте <span class="ml">200 мл</span> <span class="price">60 p.</span></p> 
        <p>Американо <span class="ml">200 мл</span> <span class="price">125 p.</span></p> 
        <p>Капучино <span class="ml">200 мл</span> <span class="price">150 p.</span></p> 
        <p>Латте <span class="ml">200 мл</span> <span class="price">160 p.</span></p> 
        <p>Кока-кола / Фанта / Спрайт <span class="ml">200 мл</span> <span class="price">90 p.</span></p> 
        <p>Вода << БонАква >> <span class="ml">200 мл</span> <span class="price">75 p.</span></p> 
        <p>Чай << Нести >> <span class="ml">200 мл</span> <span class="price">75 p.</span></p> 
        <p>Сок в ассортименте <span class="ml">200 мл</span> <span class="price">75 p.</span></p> 
    </div> 
 
    <p class="subtext">* Здесь и далее пищевая и энергетическая ценность указаны на 100 г продукта</p> 
 
    <div class="footermenu2"></div> 
 
</div>

Answer 1

Например:

div.menu { 
  margin-top: 10px; 
} 
div.menu p { 
  color: #838383; 
  font-size: 18px; 
  font-family: Partner, sans-serif; 
} 
div.menu p span.title { 
  font-family: Rodeoc; 
  color: #c42213; 
} 
div.menu p span.gramm { 
  font-size: 15px; 
  font-family: Partner, sans-serif; 
  color: #000; 
  margin-left: 55px; 
} 
div.menu p span.boldertext { 
  font-size: 17px; 
  font-family: Partner, sans-serif; 
  color: #000; 
  font-weight: 600; 
  margin-left: 15px; 
} 
div.menu p.text { 
  color: #000; 
} 
div.menu p.subtext { 
  font-size: 14px; 
  color: #838383; 
} 
 
p.subtext { 
  font-family: Partner, sans-serif; 
  font-size: 12px; 
  color: #838383; 
} 
 
div.footermenu { 
  position: absolute; 
  background: url("../img/footermenu.png"); 
  width: 120%; 
  height: 78px; 
  right: -50px; 
  background-size: cover; 
} 
 
div.footermenu2 { 
  position: absolute; 
  background: url("../img/footermenu.png"); 
  width: 120%; 
  height: 60px; 
  right: -50px; 
  background-size: cover; 
} 
 
div.submenu { 
  margin-top: 10px; 
} 
 
div.submenu p { 
  font-family: Rodeoc; 
  font-size: 18px; 
} 
 
div.submenu span.ml { 
  font-family: Partner; 
  font-size: 15px; 
} 
 
div.submenu span.price { 
  font-size: 17px; 
  font-family: Partner, sans-serif; 
  color: #000; 
  font-weight: 600; 
  margin-left: 15px; 
} 
 
 
.menu { 
  border-right: 2px solid red; 
} 
 
.right { 
  text-align: right; 
  float: right; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" /> 
   
<div class="container"> 
  <div class="row"> 
    <div class="col-md-4 col-xs-12"> 
      <h4 class="text-center">КАМЧАТКА</h4> 
      <h1 class="text-center">Рамен</h1> 
 
      <div class="menu"> 
          <p>#7 <span class="title">Торидон</span>  
              <span class="right"> 
                <span class="gramm">350г</span> 
                <span class="boldertext">270 р.</span> 
              </span> 
          </p> 
          <p class="text">Рис, филе куриного бедра, соус</p> 
          <p class="subtext">Белки: 9,5г; жиры: 6,2г; углеводы: 25,9г. Калорийность: 195 ккал*</p> 
      </div> 
 
      <div class="menu"> 
          <p>#8 <span class="title">Кацудон</span>  
            <span class="right"> 
              <span class="gramm">350г</span> 
              <span class="boldertext">270 р.</span> 
            </span> 
          </p> 
          <p class="text">Рис, свиная отбивная в панировке, капуста</p> 
          <p class="subtext">Белки: 9,5г; жиры: 5,5г; углеводы: 32,1г. Калорийность: 235 ккал</p> 
      </div> 
 
      <div class="menu"> 
          <p>#9 <span class="title">Суп Мисо</span>  
            <span class="right"> 
              <span class="gramm">170г</span> 
              <span class="boldertext">60 р.</span> 
            </span> 
          </p> 
          <p class="text">Традиционный японский суп на основе рыбного бульона Хондаши, морских водорослей 
          и соевого сыра Тофу</p> 
          <p class="subtext">Белки: 2,1г; жиры: 1,2г; углеводы: 11,7г. Калорийность: 66 ккал</p> 
      </div> 
 
      <div class="submenu"> 
          <p>Чай в ассортименте  
            <span class="right"> 
              <span class="ml">200 мл</span>  
              <span class="price">60 p.</span> 
            </span> 
          </p> 
          <p>Американо  
            <span class="right"> 
              <span class="ml">200 мл</span>  
              <span class="price">125 p.</span> 
            </span> 
          </p> 
          <p>Капучино  
            <span class="right"> 
              <span class="ml">200 мл</span>  
              <span class="price">150 p.</span> 
            </span> 
          </p> 
          
      </div> 
 
      <p class="subtext">* Здесь и далее пищевая и энергетическая ценность указаны на 100 г продукта</p> 
 
      <div class="footermenu2"></div> 
 
    </div> 
  </div> 
</div>

Граммы и цену объединить в общую обертку и выровнять по правой стороне.

Answer 2

Самый простой вариант - использовать flex:

.name-item { 
  display:flex; 
} 
.name-item  .title { 
  flex-grow:1; 
}

   <div class="menu"> 
        <p class="name-item">#7 <span class="title">Торидон</span> <span class="gramm">350г</span> 
            <span class="boldertext">270 р.</span> 
        </p> 
        <p class="text">Рис, филе куриного бедра, соус</p> 
        <p class="subtext">Белки: 9,5г; жиры: 6,2г; углеводы: 25,9г. Калорийность: 195 ккал*</p> 
    </div> 
 
    <div class="menu"> 
        <p class="name-item">#8 <span class="title">Кацудон</span> <span class="gramm">350г</span> 
            <span class="boldertext">270 р.</span> 
        </p> 
        <p class="text">Рис, свиная отбивная в панировке, капуста</p> 
        <p class="subtext">Белки: 9,5г; жиры: 5,5г; углеводы: 32,1г. Калорийность: 235 ккал</p> 
    </div>