我网站上的一个部分有以下代码:http://jsfiddle.net/qda6bkze/
问题是，我无法让它响应。理想情况下，我希望橙色框和图片自行对齐，以便图片与橙色框重叠。像这样:http://puu.sh/bMb8M.jpg
我知道我必须使用媒体查询，但我想知道要进行哪些更改才能使图像在橙色 block 下自行对齐，因为现在无论浏览器窗口有多大，它都位于右侧是。
这是我现在拥有的 CSS:
.home-feature4 {
position:relative;
max-width:1200px;
}
#boxy {
width:1200px;
height:790px;
}
.feature4text, .orangeblock, .orangephoto {
position: absolute;
text-align: center;
}
.feature4text {
z-index: 2;
color:#32719a;
font-family:"Scout", sans-serif;
text-transform:uppercase;
font-size:12pt;
top: 100px;
left: 120px;
width:425px;
}
.orangeblock {
z-index:1;
top: 280px;
left: 20px;
}
.orangephoto {
z-index: 3;
top: 0px;
left: 600px;
}
最佳答案
取出top和left属性，添加float: left;
像这样:
.orangephoto {
z-index: 3;
float: left;
}
A reference for the float property (and others) from W3 Schools
关于html - div响应中的对齐图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26022921/