目中有時候會遇到這個問題：一行有3個div，希望這3個div平分屏幕寬度，并且高度等于寬度。

第一個問題：平分屏幕寬度

可以對div設置百分比寬度，而不是直接用px寬度，這里用到了響應式設計的思想，可以參考這篇文章：自適應網頁設計（Responsive Web Design）

第二個問題：動態設置高度和寬度一致

有兩種方法，一種是用js動態設置，一種是直接用CSS設置

先看下html代碼

<ul>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

公用的CSS

ul,li{

list-style: none;

}

* {

margin: 0;

padding: 0;

outline: 0

}

body {

margin: 0;

padding: 0;

-webkit-appearance: none;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 16px;

}

ul{

margin:10px;

}

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

用js動態設置

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

$(window).resize(function() {

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

});

• 1
• 2
• 3
• 4
• 5
• 6

用CSS設置

.dummy {

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background: #333333;

}

• 1
• 2
• 3
• 4
• 5

CSS設置padding-top的原理：Use CSS to Specify the Aspect Ratio of a Fluid Element

/———————————————————

然后嘗試對圖片設置高度等于動態寬度

js方法很簡單，跟上面的方法基本相同

<ul>

<li class="container">

<img src="images/test_1.jpg"/>

<div class="element">

some text

</div>

</li>

<li class="container">

<img src="images/test_2.jpg"/>

<div class="element">

some text

</div>

</li>

<li class="container">

<img src="images/test_3.jpg"/>

<div class="element">

some text

</div>

</li>

</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.container img{

width: 100%;

height:100%;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

$(window).resize(function() {

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

});

• 1
• 2
• 3
• 4
• 5
• 6

CSS方法

<ul>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.dummy{

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background:url(images/test_3.jpg) no-repeat;

-webkit-background-size: 100%;

background-size: 100%;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

通過設置background可以實現。

div包含img的方法沒有試驗成功，以后繼續嘗試

/————————————-

還有一個問題，怎么設置div和img之間的padding，又能保證div寬度是屏幕寬度的三分之一？

學生就可以看懂的css基礎知識系列，pre標簽里是筆記總結，動手實際操作一下會加強理解。有疑問留言交流哦。

案一:

html

	<ul>
		<li class="active">
			<em></em>
			<p><b>參與考試《第一期模擬考試》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
		<li>
			<em></em>
			<p><b>學習文檔《LDO電路設計規范》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
		<li>
			<em></em>
			<p><b>學習文檔《LDO電路設計規范》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
	</ul>

Css:

*{margin:0;padding:0;}
		ul{
			margin:100px;
			padding:0;
			list-style: none;
		}
			ul li{
				position:relative;
				padding-left: 30px;
				padding-bottom: 20px;
				border-left:2px #999 solid;
			}
			ul li em{
				position:absolute;	left:-5px;	top:0; width:8px;
	height:8px;border-radius:8px;background:#999;
			}
			ul li.active em{	background: red;}
			ul li p{margin:0;}
			ul li time{color:#999;font-size:12px;}

實現原理:

給每一個li一個左邊框,em標簽使用樣式寫成原點,采用定位將原點定位到邊框線上

方案二:

Html

<ul>
		<li class="active">
			<img src="2.png" alt="" />
			<p><b>參與考試《第一期模擬考試》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
		<li>
			<img src="1.png" alt="" />
			<p><b>學習文檔《LDO電路設計規范》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
		<li>
			<img src="1.png" alt="" />
			<p><b>學習文檔《LDO電路設計規范》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
	</ul>

Css

	*{margin:0;padding:0;}
			ul{
				margin:100px;
				padding:0;
				list-style: none;
			}
			ul li{
				position:relative;
				padding-left: 30px;
				padding-bottom: 20px;
				border-left:2px #999 solid;
			}
			ul li img{
				position:absolute;
				left:-5px;
				top:0;
				width:10px;
				height:10px;
				border-radius:10px;
				background:#999;
			}
			ul li p{margin:0;}
			ul li time{color:#999;font-size:12px;}

實現原理:

給li一個左邊框,同時在結構中添加img作為原點,使用定位將圖片原點定位在指定位置上

來源：千鋒web前端