Выравнивание по вертикали: сверху на встроенных элементах div - PullRequest
Новая
       3

Выравнивание по вертикали: сверху на встроенных элементах div

0 голосов
/ 15 мая 2018

Я сделал карту следующим образом.Если вы посмотрите на последний раздел, первые два столбца выровнены по горизонтали со второй строкой содержимого третьего столбца (1 000 000,00).Можно ли сделать так, чтобы они были выровнены по первой строке?Я новичок в этом, и вертикальное выравнивание кажется не работает.

Любая помощь приветствуется! 

.panel-bg {
  background-color: #F8F8F8; 
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 24px 0;
}

.panel {
  width: 720px;
  height: 100%;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  margin: 0 auto;
  padding: 24px;
  color: #333;
}

.panel-title-row {
  display: block;
  width: 100%;
  border-collapse: collapse;
  border-bottom: solid 1px #c4c4c4;
}

.panel-title {
  display: inline-block;
  width: calc(100% - 125px);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  color: #0099ff;
  padding: 0;
}

.panel-subtitle {
  color: #999;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  padding-bottom: 8px;
  margin-top: 24px;
}

.panel-action {
  text-align: right;
  width: 120px;
  display: inline-block;
  padding:0px 0 15px 0;
  margin: 0;
}

.panel-action li {
  margin-left: 16px;
}

.panel-action li:last-child {
  margin-left: 32px;
}

.panel-action li i {
  color: #333;
  font-size: 12px;
}

.col-33 {
  width: 32.5%; 
  display: inline-block;
  padding: 0;
}

.col-66 {
  width: 66%;
  display: inline-block;
}

.panel-data {
  margin-bottom: 16px; 
}

.panel-data-label {
  font-weight: 700;
  font-size: 12px;
}

.panel-data-value {
  font-size: 13px; 
  margin-top: 8px;
}

.panel-content {
  display: block;
  width: 100%;
  padding-top: 16px;
}

.panel-data-horizontal {
  display: table;
  width: 100%;
  margin-bottom: 8px !important;
}

.panel-data-horizontal .panel-data-label,
.panel-data-horizontal .panel-data-value {
  display: table-cell;
  border-right: solid 8px transparent;
}

.panel-data-horizontal .panel-data-label {
  width: 160px; 
}

.panel-data-horizontal .panel-data-value {
  width: calc(100% - 120px);
}

.panel-data-label-sub,
.panel-data-value-sub {
  font-size: 13px; 
}

.panel-data-label-sub {
  font-weight: 400;
  padding-left: 24px;
  width: 136px !important;
}

.panel-data-last {
  margin-bottom: 24px !important; 
}

.horizontal-values {
  margin-top: 0 !important;
}

.panel-data-extend {
  font-size: 13px; 
  margin-bottom: 8px;
}

.panel-data-extend-label {
  font-size: 12px;
}

@media (max-width: 575px) {
  .panel-data-horizontal .panel-data-label {
    width: 100%;
    display: block;
  }
  
  .panel-data-horizontal .panel-data-value {
    width: 100%;
    display: block;
  }
  
  .panel-data-label-sub,
  .panel-data-value-sub {
    display: inline-block !important;
    width: 40% !important;
  }
  
  .col-33 {
    width: 100%; 
  }
}

@media (max-width: 767px) {
  .panel {
    width: calc(100% - 64px);
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="panel-bg">

<div class="panel">
  <div class="panel-title-row">
    <div class="panel-title">
      Members
    </div>
    <ul class="panel-action">
      <li><i class="fas fa-pencil-alt"></i></li>
      <li><i class="fas fa-trash"></i></li>
      <li><i class="fas fa-chevron-down"></i></li>
    </ul>
  </div>
  <div class="panel-content">
    <div class="col-100">
      <div class="panel-data panel-data-horizontal panel-data-last">
        <div class="panel-data-label">
          Effective Date
        </div>
        <div class="panel-data-value">
          1 Jan 2018
        </div>
      </div>
      <div class="panel-data panel-data-horizontal">
        <div class="panel-data-label">
          Employment Type
        </div>
        <div class="panel-data-value">
          Permanent
        </div>
      </div>
      <div class="panel-data panel-data-horizontal">
        <div class="panel-data-label">
          Job Level
        </div>
        <div class="panel-data-value">
          Staff
        </div>
      </div>
      <div class="panel-data panel-data-horizontal">
        <div class="panel-data-label">
          Job Title
        </div>
        <div class="panel-data-value">
          Software Development Engineer, System Engineer, Security Engineer, UI/UX Designer, Project Manager, Data Analyst, Data Scientist, AI Engineer, Human Resources Officer
        </div>
      </div>
      <div class="panel-data panel-data-horizontal">
        <div class="panel-data-label">
          Organization
        </div>
        <div class="panel-data-value">
          ICT, HR
        </div>
      </div>
      <div class="panel-data panel-data-horizontal">
        <div class="panel-data-label">
          Marital Status
        </div>
        <div class="panel-data-value">
          All
        </div>
      </div>
      <div class="panel-data panel-data-horizontal panel-data-last">
        <div class="panel-data-label">
          Location
        </div>
        <div class="panel-data-value">
          All
        </div>
      </div>
      <div class="panel-data panel-data-horizontal">
        <div class="panel-data-label">
          Family Reimbursement
        </div>
        <div class="panel-data-value">
          No
        </div>
      </div>
    </div>
  </div>
  <div class="panel-title-row">
    <div class="panel-subtitle">
      Balance
    </div>
  </div>
  <div class="panel-content">
    <div class="col-100">
      <div class="panel-data panel-data-vertical">
        <div class="panel-data-label">
          Total Claim To Be Paid
        </div>
        <div class="panel-data-value">
          <div class="panel-data panel-data-horizontal">
            <div class="panel-data-label panel-data-label-sub">
              For employee
            </div>
            <div class="panel-data-value-sub">
              100%
            </div>
          </div>
        </div>
        <div class="panel-data-value">
          <div class="panel-data panel-data-horizontal">
            <div class="panel-data-label panel-data-label-sub">
              For family
            </div>
            <div class="panel-data-value-sub">
              90%
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-data panel-data-vertical">
      <div class="panel-data-label">
        Currency
      </div>
      <div class="panel-data-value">
        Indonesian Rupiah
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data panel-data-vertical">
        <div class="panel-data-label">
          Limit Per Claim
        </div>
        <div class="panel-data-value">
          Unlimited
        </div>
      </div>
    </div>
    <div class="col-66">
      <div class="panel-data panel-data-vertical">
        <div class="panel-data-label">
         Limit Balance Type
        </div>
        <div class="panel-data-value">
          Editable
        </div>
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data panel-data-vertical">
        <div class="panel-data-label">
          Limit Balance
        </div>
        <div class="panel-data-value">
          10,000,000.00
        </div>
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data panel-data-vertical">
        <div class="panel-data-label">
         Over-Limit Balance
        </div>
        <div class="panel-data-value">
          No
        </div>
      </div>
    </div>
  </div>
  <div class="panel-title-row">
    <div class="panel-subtitle">
      Additional Balance Based On Tenure
    </div>
  </div>
    <div class="panel-content">
      <div class="col-33">
         <div class="panel-data-extend panel-data-extend-label">
         <b>1 working year(s)</b>
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data-extend">
       1,000,000.00 balance increase
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data-extend">
       Total balance <br /> Editable + 1,000,000.00
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data">
        <div class="panel-data-extend panel-data-extend-label">
          <b>2 working year(s)</b>
        </div>
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data">
        <div class="panel-data-extend">
         2,000,000.00 balance increase
        </div>
      </div>
    </div>
    <div class="col-33">
      <div class="panel-data">
        <div class="panel-data-extend">
         Total balance <br /> Editable + 2,000,000.00
        </div>
      </div>
    </div>
  </div>
</div>
  
</div>

1 Ответ

0 голосов
/ 15 мая 2018

Добавьте ниже css и отметьте 

.col-33 {
    width: 32.5%;
    display: inline-block;
    padding: 0;
    vertical-align: top;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...