这是可能通过创建HTML表格和CSS

  • Z时代
  • 2024-01-10
  • 分类：问答

我知道一点的JavaScript和jQuery来实现，但我更喜欢使用HTML和CSS。这是可能通过创建HTML表格和CSS

This image was created in Word, if I can replicate this in HTML and Css that would be great

回答：

自举溶液 - 把网页切成三部分，并且然后用于左和右列添加垂直堆叠的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>

以上是 这是可能通过创建HTML表格和CSS 的全部内容， 来源链接： utcz.com/qa/258489.html

回到顶部