css响应式主题图像分隔符布局
嗨，感谢阅读，我正在建设这个网站的http://myspacioclub.com和我使用一个wordpress响应式的主题，我得到了这个图像"bannerfb“与类"banner”，这是要求客户。因此，在徽标的空间中，我创建了一个新的div来放置横幅，并将以下属性添加到横幅的div中：
.banner { position:relative; top:-170px; left:450px; }
但由于主题是响应式的，当我将窗口缩小到平板电脑或手机的大小时，布局会被打破，有人能帮我吗？我如何修复主题，只使用横幅属性时，窗口是在一个较大的分辨率，或任何类似的解决方案，但想法是保持横幅与这些属性不受较小的尺寸影响。
回答 1
Stack Overflow用户
发布于 2013-04-24 12:58:33
你可以用不同的方法来实现这一点，但有一种方法是这样的:首先将你的徽标和横幅包装在一个div中
<div class="wrap">
<div class="logo">
<a href="">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/Myspacioclub.png"/>
</a>
</div>
<div class="banner">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/bannerfb.jpg"/>
</div>
</div>然后添加以下CSS：
.wrap {
position: relative;
width: 100%;
}
.logo {
width: 50%;
float: left;
}
.banner {
width: 50%;
float: right;
}
.banner img, .logo img {
width: 100%;
height: 100%;
}你可以看到working example in here。另外，我必须指出，至少在此刻，您正在使用超过7000px宽度的图像在您的横幅。这不是你应该做的。你的横幅，至少在我的屏幕上，是700px宽。永远不要使用超出您需要的大图像。它显示了700px宽的图像，但你仍然需要加载7000px的图像。转换为较小的尺寸！如果你需要大屏幕图像，你可以使用javascript或者css @media标签来加载不同屏幕尺寸的图像。为此，您必须将您的横幅图像设置为背景，而不是<img>，然后在CSS中执行以下操作：
@media only screen and (min-width: 35em){
/* Style adjustments for viewports that meet the condition */
.banner { background: url(path/to/image); }
}您可以像这样设置许多步骤。只需添加另一个，更改min-width并加载不同的图像到背景。
因此，在您的页面中，您必须在CSS中执行以下操作：
@media (min-width: 1320px){
.span8 { width:1178px; }
}
.name-logo, .banner { width: 50%; }
.banner img { width: 100%; height: 100% }
.name-logo img { width: auto; height: auto; }
.name-logo { float: left; }
.banner { float: right; }响应式布局的诀窍是使用百分比值，而不是固定的像素值，如果可能的话，不要使用负边距。
https://stackoverflow.com/questions/16183399
复制相似问题
腾讯云开发者
