CSS div尊重其他div

-1

我想让div响应。我有三个div：CSS div尊重其他div

LEFT | MIDDLE | RIGHT

由于这是针对移动网站，因此我必须能够尊重屏幕尺寸。所以我想Middle div（其中包含input）调整大小，而不是其他的。

这里的jsfiddle：http://jsfiddle.net/sbxmL/62/

如果你抓住的jsfiddle分离并推至右侧，右侧的图像将下降到另一条线路。我想维护两边的图像，并调整中间的div。

另外，我想middle div是全宽，这意味着它只能有image left和image right之间的空间（可以说20px）。

我该如何做到这一点？

来源

2014-02-21 user3243925

这应该是解决方案：

@media only screen and (max-width: 600px) { 
    div.header .middle{ 
     width: 40%; 
    } 
}

的jsfiddle：http://jsfiddle.net/sbxmL/63/ 与@media only screen and (max-width: 600px) {您可以设置的CSS，使你的中等规模较小的时候，她的屏幕小于600px的

来源

2014-02-21 12:17:07 Rickert

试试这个例子： http://codepen.io/anon/pen/kKJnb

当你问只有.middle股改变其宽度，而.left和.right有一个固定的宽度。我已经使用calc()函数，所以这个例子将适用于所有现代浏览器（无论如何不在IE < 9或Safari < 6）。 div浮动，因此您可能需要将清除应用于父元素。

相关CSS

.header * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.header div { 
    float: left; 
    height: 80px; 
    line-height: 80px; 
    text-align: center; 
    background: #c0d6c3; 
} 

.left, .right { 
    width: 50px; // fixed width 
} 

.middle { 
    width: -webkit-calc(100% - 100px); 
    width: -moz-calc(100% - 100px); 
    width: calc(100% - 100px); 
} 

/* 96% so you have a small space between images */ 
input { width: 96%; }

来源

2014-02-21 12:33:02 fcalderan

CSS div尊重其他div

回答

相关问题