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

Question

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

У меня есть 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

php

задан IvanS95 21.03.2019, 09:46

Ссылка

2 ответа

Похожие вопросы

IvanS95 · Answer 1 · 02.12.2019, 05:22

Смотри этот пример; здесь я использую совсем не больше 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.

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

Jheyman Mejia · Answer 2 · 02.12.2019, 05:22

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

ответ дан Jheyman Mejia 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

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

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

Inicial

Empresarial

Profesional

E-commerse

Теги

Похожие вопросы