响应DIV和背景

这是第一次，我做了一些回应div的，现在我已经作出了响应的背景，我想我的内容是这样的：响应DIV和背景

enter image description here

但它看起来像这样：

enter image description here

如果有人可以帮助我，这将是巨大的。这里是我的代码，你看到我在做什么

HTML：

<div class="container"> 
    <div class="leftColumn"><img src="projekt.png" width="400" height="400"></div> 
    <div class="rightColumn"><img src="projekt2.png" width="400" height="400"></div> 
</div>

CSS：

.container {width:100%;} 

.leftColumn {width:50%; float:left;} 
.rightColumn {width:50%; float:left;} 

@media(max-width:400px) 
{ 
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; } 

.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; } 

}

图像是400×400像素和背景图像是1920×1080

来源

2014-03-31 LV_

以供将来参考，不使用代码周围的网址标记。他们是链接，而不是代码。标记为代码时，我们无法点击它们。此外，如果您要链接JSFiddle，则需要在帖子中包含代码。向我们展示您已经尝试过的代码。 – TylerH

我不明白你需要什么基于你的小提琴......它是假设是正确的时候超过400px和你的问题是当时小于400px？这是你想要的东西的http：//jsfiddle.net/XmqNy/233/ –

是和它需要在屏幕的中心不是在左侧或中心顶部必须是在屏幕的中心.. –

对于背景，请使用background-size属性（CSS3）。

.container {width:100%;} 

.leftColumn {width:50%; float:left;} 
.rightColumn {width:50%; float:left;} 

@media(max-width:400px) 
{ 
    .container { 
     width: 400px; 
     height: 400px; 
     background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg); 
     background-size: 400px; 
    }  
    .leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; } 
    .rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; } 
} 
@media (min-width:401px) and (max-width:800px) 
{ 
    .container { 
     width: 800px; 
     height: 800px; 
     background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg); 
     background-size: 800px; 
    }  
    .leftColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:red; } 
    .rightColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:blue; } 
}

http://jsfiddle.net/XmqNy/235/

来源

2014-03-31 13:52:55

肯定的，但现在我想的是2周的div中心Verticaly，你知道该怎么做 –

像这样：？？http://jsfiddle.net/7uDe8/ –

这是它现在看起来我.stack.imgur.com/xfG7pl.png，这是我希望它看起来i.stack.imgur.com/jJ7tgl.png –

尝试在你的CSS文件：

@media(max-width:400px) 
{ 
    .leftColumn { width:100px; position:relative; background-color:red; } 

    .rightColumn { width:100px; position:relative; background-color:blue; } 

}

你不需要写显示：无。

来源

2014-03-31 13:41:01 Luiggi

都能跟得上还是一样:( –

响应DIV和背景

回答

相关问题