<!DOCTYPE?html>
<html>
<head>
<title>練習</title>
<meta?charset="utf-8"/>
<style>
????img{width:350px;?height:220px;?display:block;?margin:auto;}
????#div1{display:?inline;?margin:?30px;}
????#div2{background-color:#fff;?width:350px;?height:60px;?margin:auto;}
</style>
</head>
<body?style="background:#ddd;">
<div?style="text-align:?center;?">
????<div?id="div1">
????????<img?src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
????????<div?id="div2"></div>
????</div>
????
????<div?id="div1">
????????<img?src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
????????<div?id="div2"></div>
????</div>
????
????<div?id="div1">
????????<img?src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
????????<div?id="div2"></div>
????</div>
????
????<div?id="div1">
????????<img?src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
????????<div?id="div2"></div>
????</div>
</div>
</body>
</html>
2017-08-25
剛試了一下,是由于img設定為塊級元素和沒有設置div2為行級元素的原因,畢竟塊級元素會自動換行的。還有屏幕分辨率也會影響瀏覽器上的排版。
<style>
? ? img{width:350px; height:220px; ?margin:auto;}
? ? #div1{display: inline; margin: 30px;}
? ? #div2{display: inline;background-color:#fff; width:350px; height:60px; margin:auto;}
</style>
2017-09-20
<!DOCTYPE html>
<html>
<head>
<title>練習</title>
<meta charset="utf-8"/>
<style>
? ? img{width:320px; height:220px;}
</style>
</head>
<body style="background:#ddd;">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
<img src="http://dl.bizhi.sogou.com/images/2013/04/09/334939.jpg">
</body>
</html>
這樣就在tongyihang了
2017-08-25
id選擇器是唯一的，你換類選擇器試試