Question

我的网站上有以下代码：http://jsfiddle.net/qda6bkze/

问题是，我无法让它做出回应。理想情况下，我希望橙色框和图片对齐，使图片与橙色框重叠。这样的事情：http://puu.sh/bMb8M.jpg

我知道我将不得不使用媒体查询，但我想知道为了使图像在橙色块下对齐而做出哪些更改，因为不管浏览器窗口有多大，它现在都在右边是。

这就是我现在拥有的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;
}

Answer 1

取出top和left属性并添加float: left; 像这样：

.orangephoto {
   z-index: 3;
   float: left;
}

A reference for the float property (and others) from W3 Schools

Answer 2

你需要给你的div一个＆＃34; ID＆＃34;并将图像放在div中。我在下面给你写了一些标记，随意复制它并进行调整以便在你的网站上工作。如果您有任何其他问题，请随时与我联系。我很乐意提供帮助。

= snippet“data-lang =”js“data-hide =”false“> ＆＃13;

＆＃13;

/* Your can adjust the CSS however you see fit for your Project */
#orangeblock {
	width:410px; /* Give your background block extra pixels needed for your border */
	height:310px; /* Same with your height */
	background-color:#CCC;
}
#orangeblock img {
	width: 390px; /* your image size shouls always be smaller than your div size */
	height: 290px; /* This will allow you to see the background image */
	padding: 10px; /* Your padding will have to be adjusted to get the image where your want */
	
	/* you can also use padding-left: padding-right: padding-top: padding-bottom: and place whatever pixels you like */
}

＆＃13;

<html>
<head>
</head>
<body>
<div id="orangeblock">
  <img src="https://cdn.shopify.com/s/files/1/0636/3475/files/home-ossection-04-photo.jpg">
</div>
</body>
</html>

＆＃13;

div中的对齐图像响应

2 个答案: