Налаживать несколько списков <ul> в единственную вертикальную высоту (верный вертикальный текст упомянул)

У меня есть 4

    у которых есть неодинаковый контент, я обрабатываю информацию есть налаживать 4 списка в единственный размер introducir la descripción de la imagen aquí

    код html страницы и стилей, которые я добавляю ему

    #planes {
      padding-top: 47px;
      background-color: rgba(208, 207, 207, 1);
    }
    
    .our_planes {
      padding: 71px 0 78px;
      background-color: #fff
    }
    
    span.separator {
      border: 0;
      border-top: 1px solid #999;
      border-bottom: 1px solid #333;
      height: 1px;
      padding: 0;
    }
    
    ul li a.i1,
    ul li a.i2 {
      font-size: larger;
      font-weight: 600;
    }
    
    ul li.active a.i1,
    ul li.active a.i2 {
      border: 1.5px solid #059279 !important;
      border-bottom: #0000 !important;
    }
    
    .sngl_pricing ul {
      /* border : #b4b4b4 solid 5px; */
      margin: 0;
      padding: 0;
      transition: all 1s ease 0s;
      -moz-transition: all 1s ease 0s;
      -webkit-transition: all 1s ease 0s
    }
    
    @media {}
    
    .sngl_pricing ul li {
      color: #666666;
      font-family: sans-serif;
      font-size: 14px;
      list-style: none outside none;
      text-transform: capitalize;
      /* border-top : 2px solid #b4b4b4; */
      padding: 7px 0;
      text-align: center;
      font-weight: 550;
    }
    
    .sngl_pricing ul li:first-child {
      border-top: 0;
    }
    
    .our_planes .nav-tabs {
      border-bottom: 2px solid #105089;
    }
    
    .our_planes .nav-tabs>li {
      margin-bottom: -2px;
    }
    
    .sngl_pricing {
      text-align: center;
      /* border : #b4b4b4 solid 5px; */
      margin-bottom: 5px;
    }
    
    #web-dev .sngl_pricing:hover {
      border: #03c5c3 solid 5px;
      transition: all 1s ease 0s;
      -moz-transition: all 1s ease 0s;
      -webkit-transition: all 1s ease 0s
    }
    
    #social .sngl_pricing:hover {
      border: #7303a9 solid 5px;
      transition: all 1s ease 0s;
    }
    
    .sngl_pricing>h2 {
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      margin: 0;
      padding: 10px;
      text-transform: uppercase;
      /* background-color: #059279; */
      /* background-image : url("../images/clean_code_bg.jpg"); */
    }
    
    .p_b_color {
      background-image: linear-gradient(to right bottom, #032bc5, #0064e5, #008ae5, #00a9d3, #03c5c3);
      background-color: none;
    }
    
    .s_b_color {
      background-image: linear-gradient(to left bottom, #7303a9, #6512b0, #541cb7, #3c24be, #032bc5);
      background-color: none;
    }
    
    div.ecommerce:hover {
      border-color: #008000;
    }
    
    .sngl_pricing>h2.ecommerce {
      background-color: #008000;
    }
    
    .title_bg_1 {
      background-image: url("../img/basic.jpg");
      ba;
      ckground-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .title_bg_2 {
      background-image: url("../img/standar.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .title_bg_3 {
      background-image: url("../img/extended.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    
    .sngl_pricing>h3 {
      background: none 0 0 repeat scroll #b4b4b4;
      color: #515050;
      font-size: 33px;
      margin: 0;
      padding: 20px 0;
    }
    
    .currency {
      font-size: 18px;
      position: relative;
      top: -18px;
    }
    
    .monuth {
      font-size: 24px;
      text-transform: none;
    }
    
    .btn.pricing_btn {
      background: none 0 0 repeat scroll #105089;
      border: #666666 solid 1px;
      color: #fff;
      text-transform: uppercase;
      padding: 10px 30px;
    }
    
    .sngl_pricing ul {
      margin: 0;
      padding: 24px 0;
    }
    
    .sngl_pricing a {
      margin-top: 30px;
    }
    
    

    Enlace su empresa a la web con nuestro servicio de desarrollo.

    Inicial

    • Plantilla Personalizada
    • Hasta 3 páginas para contenido
    • Nombre de dominio
    • 1000mb de hospedaje
    • Integración de redes Sociales
    • Responsive Design
    • Formulario de Contacto
    • Mantenimiento y Administración
    • Publicación y Registro de la Web
    • Correo Corporativo
    • Publicación En Español
    • Solicitar

    Empresarial

    • Plantillas Personalizadas.
    • 8 páginas para contenido.
    • Modulo de Registro.
    • Nombre de dominio .com.ve
    • 2000mb de hospedaje.
    • Integración de redes Sociales.
    • Responsive Design.
    • Formulario de Contacto.
    • Mantenimiento y Administración.
    • Publicación y Registro de la Web.
    • Correo Corporativo.
    • Autoadministrable.
    • Publicación en Español.
    • Solicitar

    Profesional

    • Plantillas Personalizadas.
    • Multiples páginas para contenido
    • Modulo administrativo y registro
    • Nombre de dominio .com.ve
    • 3000mb de hospedaje
    • Integración de redes Sociales
    • Responsive Design
    • Formulario de Contacto.
    • Mantenimiento y Administración.
    • Publicación y Registro de la Web.
    • Correo Corporativo.
    • Autoadministrable.
    • Publicación En Ingles y Español.
    • Solicitar

    E-commerse

    • Plantillas Personalizadas.
    • Sin limite de Productos.
    • Nombre de dominio .com.ve
    • 3000mb de hospedaje.
    • Integración de redes Sociales.
    • Responsive Design.
    • Mantenimiento y Administración.
    • Publicación y Registro de la Web.
    • Correo Corporativo.
    • Autoadministrable.
    • Publicación en Español.
    • Solicitar

2
задан 21.03.2019, 09:46
2 ответа

Смотри этот пример; здесь я использую совсем не больше Flexbox , без Bootstrap; добавьте какие-то стили только чтобы отличаться немного, но ты можешь изменять это, как ты нуждался.

* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 5px;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>

Следующий фрагмент - используя компоненты Bootstrap только; Bootstrap 4 предлагает тебе компонент llamdo Кард Деккс , которые он позволяет тебе группировать карточки равной высоты, не импортируя Вашего контента; все приспосабливаются к самой высокой.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. This card has even longer content than the first to show that equal height action.
        This card has even longer content than the first to show that equal height action.
      </p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <button class="btn btn-success d-block mx-auto">Solicitar</button>
    </div>
  </div>
</div>

Следующий сделан начиная с колонны в Bootstrap 4 для того, чтобы ты смог изменять место, которое ты хочешь, чтобы они заняли в каждый tamaГ±o экрана; необходимо добавлять несколько стилей для того, чтобы все вело себя или смотрелось подходящим способом.

.item-container {
  min-height: 450px;
  border: 1px solid grey;
  height: 100%;
}

.item-container .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.item-container .action {
  padding: 15px;
}

header {
  background-color: skyblue;
  padding: 15px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row align-items-stretch">
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 1</header>
        <div class="body"></div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 2</header>
        <div class="body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam repudiandae dolore animi? Aliquid facere similique rerum iste placeat debitis asperiores enim ipsum maxime impedit sequi illum odit quas laborum ad deserunt nobis quae
            saepe totam molestias, eius, veniam dignissimos pariatur? Veniam sunt illo, in voluptas iste tempore. Libero, error facilis! Odit itaque placeat voluptate perferendis deserunt aliquid quidem accusamus laudantium amet cumque, inventore est
            corporis excepturi. Debitis minus recusandae perferendis facilis. Ducimus eveniet iste laboriosam doloremque dolore consequatur exercitationem. Aliquam dolore sit repellat rerum!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 3</header>
        <div class="body">
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo, nihil beatae dignissimos nesciunt quo ipsam non reiciendis eligendi. Nesciunt optio incidunt sit, fugiat voluptatum debitis quae sequi iusto! Perferendis, quia vel quaerat in praesentium
            iure nam esse impedit necessitatibus maxime error tempora optio maiores nisi, veniam magnam quo iste voluptas quis rem, minus animi eum. Alias dolorem deserunt amet a nulla. Atque dolor cumque nam voluptates molestias! Deleniti quos eum molestiae
            eos, voluptatibus earum alias iusto in itaque vero veniam quidem architecto! Sint ducimus itaque deserunt, doloribus sunt consequatur assumenda vel tenetur error placeat harum, dicta eaque! Labore, vel eos!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="item-container d-flex flex-column">
        <header>Item 4</header>
        <div class="body">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias officia magni repellendus nobis similique dolor minima ipsa vero libero temporibus inventore, itaque recusandae optio veniam ipsam explicabo delectus officiis maxime provident impedit
            blanditiis incidunt enim atque! Porro alias quod incidunt recusandae quibusdam. Porro repellat nulla vero magni eius libero inventore distinctio esse iste quam quis, aspernatur eveniet sapiente repudiandae nihil reiciendis autem! Iusto sit
            quod sed laudantium perspiciatis dicta praesentium eaque voluptatibus, sint debitis eveniet architecto magnam ipsam, animi explicabo possimus illo libero earum maiores error corrupti adipisci aspernatur quo. Laboriosam impedit ex fuga ab ipsum
            modi nemo temporibus, eius numquam laborum exercitationem. Quae pariatur qui sit temporibus voluptatibus, iste quaerat similique optio, velit rem, doloribus non ratione! Eaque, rem!</p>
        </div>
        <div class="action">
          <button class="btn btn-success d-block mx-auto">Solicitar</button>
        </div>
      </div>
    </div>
  </div>
</div>

в зависимости от твоего проекта; если ты не можешь использовать Bootstrap 4, тогда у тебя есть она первый решение, которое использует Flexbox больше ничто; так ты это можешь включать в твой документ HTML без больших проблем. Однако, если ты можешь менять в версию 4 из Bootstrap, я думаю, что Ваши прибыли могут следовать тебе из большой помощи; кроме того, Bootstrap 4 полностью сделан с основанием в Flexbox, следовательно все то, что ты мог бы применять к Flexbox, функционирует в Bootstrap 4.

2
ответ дан 02.12.2019, 05:22
  • 1
    пробуйте с flexbox, но как я не очень ловкий, ему не удавайтесь разместить это в блоках пар к hacerce responsive как изюм с col-md-6 используйте flex-raw. я отнесусь с boots к 4, чтобы видеть достижением изменять, спасибо – J. Medina 21.03.2019, 14:01
  • 2
    Я буду включать другой пример используя колонны Bootstrap 4; то, что ты хочешь, состоит в том, чтобы это было 2 колонны из-за линии? или как точно? – IvanS95 21.03.2019, 16:10
  • 3
    @J.Medina только что добавил один 3er фрагмент, который сделан на основе классов col-* для того, чтобы ты смог изменять число колонн, в которых ты нуждался бы – IvanS95 21.03.2019, 17:17
  • 4
    большое спасибо из-за твоей помощи, мне было сложно изменение в bootstrap 4 по причинам времени, но я изменю стили едва смогите в bootstrap, flex сделал мне вещами немного тяжелый porq я имею очень интегрировано b3 в проекте. – J. Medina 22.03.2019, 13:51

PodrГ-схвати определять длину для каждой используя vh.

p.e:

<div style="height: 50vh; position: relative;">
    <div>
        Todo el contenido aquí
    </div>
    <div style="padding: 10px; position: absolute; bottom: 0;">
        <button></button>
    </div>
</div>
-1
ответ дан 02.12.2019, 05:22
  • 1
    Пожалуйста не посылай привета в ответах он не необходим –  20.03.2019, 20:44
  • 2
    Друг спасибо за твой готовый ответ, извинил за то, что не ответил быстрее, realize изменение, которое он рекомендовал мне, но разместив height таким образом случилось, что контент страницы был прокручен вверх под списками, я представляю, что он проистечет float bootstrap – J. Medina 21.03.2019, 13:56
  • 3
    @Eliseo пожалуйста проверь: ¿ Cuá l - поведение, ожидаемое от пользователей? , где становится понятным porqué послав привет в твоих публикациях está s создавая шум без необходимости. – Jheyman Mejia 21.03.2019, 20:20