我有以下HTML和CSS代码并排设置两张图片,当页面缩小时会缩小,但这不起作用。
我摆脱了父母的每一堂课,但仍然没有......
知道为什么当浏览器窗口缩小时图片不会缩小?
由于
.align {
position: absolute;
top: 75px;
z-index: -100;
}
.navigate {
margin: -10px 888px;
width: 200px;
z-index: 100;
}
.leftSide {
height: 558px;
margin: 20px 0px 0px 344px;
max-width: 500px;
}
.rightSide {
height: 558px;
margin: -5px 0px 0px 1053px;
max-width: 500px;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
margin: -557px 940px;
}
img {
width: 70%;
height: auto;
}

<div class="align">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a>
<a id="nextPic" href="#">Next>></a>
</div>
<div class="leftSide">
<img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
<div class="verticalLine"></div>
<div class="rightSide">
<img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
</div>
&#13;
答案 0 :(得分:1)
将这两个属性添加到div类
.div_class
{
margin-left: auto;
margin-right: auto;
}
答案 1 :(得分:1)
.align {
margin-left:auto;
margin-right:auto;
}
.container{
width:90%;
height:568px;
display:inline-block;
}
.navigate {
width: 100%;
text-align:center;
padding:20px;
}
.leftSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.rightSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
display:inline-block;
}
.leftSide img {
width:auto;
max-width:100%;
}
.rightSide img {
width:auto;
max-width:100%;
}
&#13;
<div class="align">
<div class="container">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a> <a id="nextPic" href="#">Next>></a> </div>
<div class="leftSide"> <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
<div class="verticalLine"></div>
<div class="rightSide"> <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
</div>
</div>
&#13;