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

回答

相關問題