                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /CSS深入理解之overflow

兩欄自適應布局

關于兩欄自適應布局沒有聽懂，有沒有demo

慕粉3743212

2016-12-30

源自：CSS深入理解之overflow 3-1

關注問題我要回答

1453

操作

收起

2 回答

慕妹3578523
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>

無論有幾個cell 都可以實現自適應而且不截斷里面的內容

0 回復有任何疑惑可以回復我~

收起回答

qq_心存一人_2
2016-12-30

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

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

0 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

CSS深入理解之overflow

參與學習 41722 人
解答問題 85 個

深入理解overflow相關特性及實際應用，為你打開另外一扇學習之窗

進入課程

本課相似問答

1 回答兩欄自適應布局

2 回答最后那個自適應布局貌似無效

8 回答6:52布局是如何寫的？

2 回答padding-left不是向左填充一個滾動欄寬度的偏移嗎？

搜索更多本課相關問答

兩欄自適應布局

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

兩欄自適應布局

2 回答

本課相似問答

兩欄自適應布局