イメージのテキストオーバーレイとブートストラップとのバランスをとる

Question

3つのイメージとテキストが重なっている行があります。テキストの左右を別々のセクションでバランスさせているようには見えません。と私は、正しく設定左のテキストを取得することができるんだけど、右のテキストのバランスをとり、セクション間の垂直方向のパイプを設定することはできません

：それは次のようになります。右または左の境界。

 .practice-areas { 
 
     h1 { 
 
     font-weight: 600; 
 
     font-size: 60px; 
 
     font-family: 'Open Sans Condensed'; 
 
     text-transform: uppercase; 
 
     color: #ffffff; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 50%; 
 
     -moz-transform: translateX(-50%) translateY(-50%); 
 
     -webkit-transform: translateX(-50%) translateY(-50%); 
 
     transform: translateX(-50%) translateY(-50%); 
 
     -webkit-font-smoothing: antialiased; 
 
     } 
 
     h5 { 
 
     text-transform: uppercase; 
 
     color: #ffffff; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 65%; 
 
     -moz-transform: translateX(-50%) translateY(-50%); 
 
     -webkit-transform: translateX(-50%) translateY(-50%); 
 
     transform: translateX(-50%) translateY(-50%); 
 
     -webkit-font-smoothing: antialiased; 
 
     } 
 
     p { 
 
     font-family: 'Open Sans Condensed'; 
 
     font-size: 20px; 
 
     text-transform: uppercase; 
 
     color: #ffffff; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 55.4%; 
 
     -moz-transform: translateX(-50%) translateY(-50%); 
 
     -webkit-transform: translateX(-50%) translateY(-50%); 
 
     transform: translateX(-50%) translateY(-50%); 
 
     -webkit-font-smoothing: antialiased; 
 
     } 
 
     .result { 
 
     color: $grey; 
 
     bottom: 7%; 
 
     font-size: 16px; 
 
     right: 38%; 
 
     } 
 
     .square-1 { 
 
     background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150'); 
 
     background-size: cover; 
 
     height: 413px; 
 
     @include breakpoint(xsmin) { 
 
      height: 213px; 
 
     } 
 
     } 
 
     .square-2 { 
 
     background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150'); 
 
     background-size: cover; 
 
     height: 413px; 
 
     @include breakpoint(xsmin) { 
 
      height: 213px; 
 
     } 
 
     } 
 
     .square-3 { 
 
     background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150'); 
 
     background-size: cover; 
 
     height: 413px; 
 
     @include breakpoint(xsmin) { 
 
      height: 213px; 
 
     } 
 
     } 
 
    }

 <div class="row practice-areas"> 
 
     <div class="row practice-areas"> 
 
     <div class="col-lg-12"> 
 
      <div class="col-lg-4 square-1"> 
 
      <div class="left"> 
 
       <h1 class="amount">$90.2</h1> 
 
       <p class="million">million</p> 
 
       <p class="result">text</p> 
 
      </div> 
 
      <div class="right"> 
 
       <h5 class="case">COMPANY NAME</h5> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 square-2"> 
 
      <h1>$90.2</h1> 
 
      <p>million</p> 
 
      <p class="result">company</p> 
 
      </div> 
 
      <div class="col-lg-4 square-3"> 
 
      <h1>$90.2</h1> 
 
      <p>million</p> 
 
      <p class="result">COMPANY</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 1

ブートストラップV3を使用する場合、それはこのようになります。私はあなたがブートストラップ3または4を使用しているのか分かりません。あなたのHTML構造も正しくありません。

@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700"); 
 
.practice-areas h1 { 
 
    font-weight: 600; 
 
    font-size: 60px; 
 
    font-family: 'Open Sans Condensed'; 
 
    text-transform: uppercase; 
 
    color: #ffffff; 
 
    line-height: 35px; 
 
    margin-bottom: 10px; 
 
    margin-top: 0; 
 
    text-align: right; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
.practice-areas h5 { 
 
    text-transform: uppercase; 
 
    color: #ffffff; 
 
    font-family: 'Open Sans Condensed'; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    text-align: left; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
.practice-areas p { 
 
    font-family: 'Open Sans Condensed'; 
 
    font-size: 20px; 
 
    line-height: 20px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 0; 
 
    text-align: right; 
 
    color: #ffffff; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
.practice-areas .result { 
 
    color: #f6f6f6; 
 
    font-size: 16px; 
 
} 
 

 
.practice-areas .square-1 { 
 
    background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150"); 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 300px; 
 
} 
 

 
.practice-areas .square-2 { 
 
    background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150"); 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 300px; 
 
} 
 

 
.practice-areas .square-3 { 
 
    background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150"); 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 300px; 
 
} 
 

 
.practice-areas .square { 
 
    bottom: 20px; 
 
    display: table; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.practice-areas .square-1, 
 
.practice-areas .square-2, 
 
.practice-areas .square-3 { 
 
    -webkit-transition: background-color 0.3s ease-in-out 0s; 
 
    -o-transition: background-color 0.3s ease-in-out 0s; 
 
    -moz-transition: background-color 0.3s ease-in-out 0s; 
 
    transition: background-color 0.3s ease-in-out 0s; 
 
} 
 

 
.practice-areas .square-1:hover, .practice-areas .square-1:focus, 
 
.practice-areas .square-2:hover, 
 
.practice-areas .square-2:focus, 
 
.practice-areas .square-3:hover, 
 
.practice-areas .square-3:focus { 
 
    background-color: #FAE2E1; 
 
    background-image: none; 
 
} 
 

 
.practice-areas .square-1 .left, 
 
.practice-areas .square-1 .right, 
 
.practice-areas .square-2 .left, 
 
.practice-areas .square-2 .right, 
 
.practice-areas .square-3 .left, 
 
.practice-areas .square-3 .right { 
 
    display: table-cell; 
 
    height: auto; 
 
    text-align: center; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    vertical-align: top; 
 
    width: 50%; 
 
} 
 

 
.practice-areas .square-1 .left, 
 
.practice-areas .square-2 .left, 
 
.practice-areas .square-3 .left { 
 
    border-right: 1px solid #ffffff; 
 
} 
 

 
.practice-areas .square-1 .right, 
 
.practice-areas .square-2 .right, 
 
.practice-areas .square-3 .right { 
 
    border-left: 1px solid #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row practice-areas"> 
 
    <div class="col-sm-4 square-1"> 
 
     <div class="square"> 
 
     <div class="left"> 
 
      <h1 class="amount">$90.2</h1> 
 
      <p class="million">million</p> 
 
      <p class="result">text</p> 
 
     </div> 
 
     <div class="right"> 
 
      <h5 class="case">COMPANY NAME</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 square-2"> 
 
     <div class="square"> 
 
     <div class="left"> 
 
      <h1 class="amount">$90.2</h1> 
 
      <p class="million">million</p> 
 
      <p class="result">text</p> 
 
     </div> 
 
     <div class="right"> 
 
      <h5 class="case">COMPANY NAME</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 square-3"> 
 
     <div class="square"> 
 
     <div class="left"> 
 
      <h1 class="amount">$90.2</h1> 
 
      <p class="million">million</p> 
 
      <p class="result">text</p> 
 
     </div> 
 
     <div class="right"> 
 
      <h5 class="case">COMPANY NAME</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

フレキシボックス救助します。私は以下のように各セクションを構成しました。残りはCSSを介して適用されました。

<div class="wrap"> 
    <div class="left"> 
     <h1 class="amount">$90.2</h1> 
     <p class="million">million</p> 
     <p class="result">text</p> 
    </div> 
    <div class="right"> 
     <h5 class="case">COMPANY NAME</h5> 
     <p class="lipsum">lipsum</p> 
     <p class="date">date</p> 
    </div> 
</div> 

https://jsfiddle.net/ke5octvj/