私は、私は3つの列を作りたいと思っている中で、私は単一の行を持っている他の高さと幅に関連していない

Question

2番目の列では、私はそれをクリックしてより多くのボタンを、テキスト展開&のアイコン&誰かが私にデモテンプレートを教えてくれます。ボタンをクリックすると、テキストdivの下にあるアイコンだけが表示され、他の列アイコンの位置に影響しないはずです。私は、これは動作します...

 <div class="grid"> 
      <div class="row"> 
       <div class="groups col-sm-4 col-xs-offset-4 career-description"> 
        <h1>srv</h1> 
        <button class="btn-link favorite glyphicon glyphicon-bookmark CLbookmark"></button> 

        <h3 class="noData_Msg" style="text-align: center;">Sorry, Data is not available for this career.</h3> 

        <p class="brief_Desc_a"> 

        </p> 
        <p class="det_DescF" ng-show="readMore"> 

        </p> 
        <a class="link_b" ng-click="readMore = true" href="javascript:void(0)">Read More</a> 
        <a class="link_b" ng-click="readMore = false" href="javascript:void(0)">Read Less</a> 

       </div> 
      </div> 
      <div class="row career-cards"> 
       <div class="groups col-sm-4"> 
        <div class="future-trnds"> 
         <a href="javascript:void(0)" class="modal-opportunity modal-cont displayTooltip" data-placement="bottom" title="Future Trends"><img class="img-responsive" src="images/Future_trends_v02.png" alt=""></a> 
        </div> 
       </div> 
       <div class="groups col-sm-4 col-xs-offset-8"> 
        <div class="related-Careers"> 
         <a href="javascript:void(0)" class="displayTooltip" title="Related careers" data-placement="bottom" ng-click="changeLocationByName('Related-careers');"><img class="img-responsive" src="images/Related_careers_v02.png" alt=""></a> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="groups col-sm-4"> 
        <div class="day-in-life"> 
         <a href="" class="displayTooltip" title="Day In the Life" ng-click="changeLocationByName('day-in-life');"><img id="no_Gray" class="img-responsive" src="images/Day_In_Life_v02.png" alt=""><img id="gray_Out" ng-Click="false" class="img-responsive gray_Icon hidden" src="images/Day_In_Life_v02.png" alt=""></a> 
        </div> 
       </div> 
       <div class="groups col-sm-4"> 
        <div class="introVideo"> 
         <div class="vid_Dimension" style="height: 300px !important;" ng-hide="!video_Url" my-youtube code="video_Url"> 

         </div> 

         <h3 class="no_Video" ng-show="!video_Url">Sorry, video is not available for this career.</h3> 

        </div> 
       </div> 
       <div class="groups col-sm-4"> 
        <div class="cost-Salary"> 
         <a href="javascript:void(0)" class="modal-cost modal-cont displayTooltip" title="Cost & Salary"> 
          <img class="img-responsive " src="images/Cost_salary_v02.png" alt="Cost & Salary"> 
         </a> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="groups col-sm-4"> 
        <div class="honeycomb-wraper"> 
         <div class="honeycomb" ng-include="'pages/traitTriangle.html'"></div> 
        </div> 
       </div> 

       <div class="groups col-sm-4"> 
        <div class="courses_Colleges"> 
         <a href="javascript:void(0)" class=" displayTooltip" title="Courses & Colleges" ng-click="changeLocationByName('coursescolleges');"><img class="img-responsive " src="images/Courses_Colleges_v02.png" alt=""></a> 
        </div> 
       </div> 
       <div class="groups col-sm-4"> 
        <div class="honeycomb-wraper"> 
         <!-- <div class="honeycomb" ng-include="'pages/iconicPeople_grid.html'"></div> --> 
         <div class="honeycomb" ng-include="'pages/workEnv_Hex.html'"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <!-- Modal --> 
    <div class="content"> 
     <div class="cont"> 
      <div class="slide-text"> 
       <span>Opportunity & Industries </span> 
      </div> 
      <div static-image ></div> 


     </div> 
     <div class="cont"> 
      <div class="slide-text"> 
       <span>Cost & salary</span> 
      </div> 
      <div class="slide-content"> 

       <!-- <img class="img-responsive" alt="modal-image" title="modal-image" /> --> 

       <div ></div> 

      </div> 
     </div> 

Answer 1

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    </head> 
    <style> 
    .border{ 
     border: 2px solid black; 
    } 
     .heightWidth{ 
      height: 200px; 
      width: 200px; 
     } 
    </style> 
    <body> 



    <div class="col-lg-4 col-md-4 col-sm-12 border"> this is your first division 
     <div class="row"> 
     <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border"> 
      first image goes here 
      </div>    
     </div> 
     <div class="row"> 
     <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border"> 
      2nd image goes here 
      </div>    
     </div> 
     <div class="row"> 
     <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border"> 
      3rd image goes here 
      </div>    
     </div> 
     </div> 



     <div class="col-lg-4 col-md-4 col-sm-12 border"> this is your second divsion 
     <div class="row"> 
      <div class="col-lg-12 col-sm-12 col-md-12"> 
      your middle section the text part goess here 
      </div> 
      </div>   
     </div> 



     <div class="col-lg-4 col-md-4 cl-sm-12 border"> this one is your third division 


     <div class="row"> 
     <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border"> 
      first image goes here 
      </div>    
     </div> 
     <div class="row"> 
     <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border"> 
      2nd image goes here 
      </div>    
     </div> 
     <div class="row"> 
     <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border"> 
      3rd image goes here 
      </div>    
     </div> 
     </div> 



    </body> 
</html> 

をこのコードを使用しています。