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