बूटस्ट्रैप

Question

के साथ छवियों के टेक्स्ट ओवरले को संतुलित करना मेरे पास तीन छवियों और टेक्स्ट को ओवरलेइंग करने वाली पंक्ति है। मुझे अलग-अलग वर्गों में संतुलित पाठ के बाएं और दाएं किनारे नहीं लग रहे हैं। यह इस तरह दिखना चाहिए:

मैं छोड़ दिया सही तरीके से सेट पर पाठ प्राप्त करने में सक्षम हूँ, लेकिन सही पर पाठ संतुलन नहीं कर सकते हैं और वर्गों के बीच एक लम्बवत पाइप निर्धारित करते हैं, एक साथ दाएं या बाएं सीमा।

 .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

आप बूटस्ट्रैप वी 3 का उपयोग करते हैं तो यह इस तरह किया जाएगा। मुझे नहीं पता कि आप बूटस्ट्रैप 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

flexbox बचाव के लिए। मैंने नीचे दिखाए गए प्रत्येक अनुभाग को संरचित किया है। शेष सीएसएस के माध्यम से लागू किया गया था।

<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/