兩欄自適應(yīng)布局
關(guān)于兩欄自適應(yīng)布局沒有聽懂，有沒有demo
慕粉3743212
2016-12-30
2 回答
舉報(bào)
0/150
提交
取消
2018-01-07
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style?type="text/css"> .cell?{ display:?table-cell; width:?2000px; *display:?inline-block; *width:?auto; padding:?20px; } .cell:nth-child(1)?{ background-color:?green; } .cell:nth-child(2)?{ background-color:?yellow; } .cell:last-child?{ background-color:?blue; } </style> </head> <body> <div?class="cell"> Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. </div> <div?class="cell"> Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. </div> <div?class="cell"> Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?eiusmod tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim?veniam, quis?nostrud?exercitation?ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo consequat.?Duis?aute?irure?dolor?in?reprehenderit?in?voluptate?velit?esse cillum?dolore?eu?fugiat?nulla?pariatur.?Excepteur?sint?occaecat?cupidatat?non proident,?sunt?in?culpa?qui?officia?deserunt?mollit?anim?id?est?laborum. </div> </body> </html>無論有幾個(gè)cell 都可以實(shí)現(xiàn)自適應(yīng) 而且不截?cái)嗬锩娴膬?nèi)容
2016-12-30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.cell{
display: table-cell;width: 2000px;
*display: inline-block;*width: auto;
background-color: red; padding: 20px;
height: 60px
}
.cell:last-child{
background-color: blue;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
</body>
</html>