2017-12-02 148 views

回答

1

自舉溶液 - 把網頁切成三部分,並且然後用於左和右列添加垂直堆疊的div跨越這些列的整個寬度。

.columnWrapper{border: solid 1px #333;text-align:center;margin:0} 
 
#leftColumn { 
 
    border-right: solid 1px #333; 
 
    padding:0 
 
} 
 

 
#rightColumn { 
 
    border-left: solid 1px #333; 
 
    padding:0 
 
} 
 

 

 
#leftColumn div, 
 
#rightColumn div{ 
 
    border-bottom: solid 1px #333; 
 
    line-height:3em 
 
} 
 

 
#leftColumn div:last-of-type, 
 
#rightColumn div:last-of-type { 
 
border-bottom-width: 0 
 
} 
 

 
#middleColumn { 
 
line-height: 9em; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    <div class="columnWrapper clearfix"> 
 
     <div class="col-xs-4" id="leftColumn"> 
 
     <div>TEXT</div> 
 
     <div>TEXT</div> 
 
     <div>TEXT</div> 
 
    </div> 
 
    <div class="col-xs-4" id="middleColumn"> 
 
     <div>PHOTO</div> 
 
     </div> 
 
    <div class="col-xs-4" id="rightColumn"> 
 
     <div>TEXT</div> 
 
     <div>TEXT</div> 
 
     <div>TEXT</div> 
 
     </div> 
 
    </div>