-1
我知道一點的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
我知道一點的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>
Flex和引導將很容易實現這個佈局。 – gavgrif
你可以給我一些基本的知識,或者發送一個更詳細的解釋鏈接嗎?關於Flexbox的 –
大嘖嘖:https://www.youtube.com/watch?v=G7EIAgfkhmg –