更改框的大小時，用CSS

調整大小的窗口，我有這個簡單的網站更改框的大小時，用CSS

<div style=" position: relative; margin-right: 40px;"> 
    <div style="float: left; width: 100px; position: relative;">Middle Stuff</div> 
    <div style="float: right; width: 200px; position: relative; margin-right: 40px;">Right Stuff</div> 
    <br style="clear: left;" /> 
</div>

，我想這中間的東西框寬度長大，當我調整窗口的大小，這樣中間的東西箱之間正確的填充框不是空的內容。

Here can you see what I want

我怎樣才能得到這個「效果」？

來源

2014-01-21 Andreas

給予寬度。浮在左邊。 –

試試這個http://jsfiddle.net/8ws2H/ – Karuppiah

試試吧。 http://jsfiddle.net/zrVPJ/8/ min css。 –

<div style="position: relative; margin-right: 40px; width: 100%;"> 
    <div style="float: left; width: 60%; position: relative; border: 1px solid #000;">Middle Stuff</div> 
    <div style="float: left; width: 200px; position: relative; margin-right: 40px;margin-left: 10px; border: 1px solid #000;">Right Stuff</div> 
    <br style="clear: left;" /> 
</div>

試試這個，你會得到第二個盒子的修復大小爲200px，而第一個盒子的修復大小爲60％。

來源

2014-01-21 06:23:13

正如評論中所述，您可以通過百分比寬度來實現。儘管如此，如果您將邊距保留在固定寬度，那麼佈局可能會中斷。

<div style=" position: relative; margin-right: 40px;"> 
    <div style="float: left; width: 58%; position: relative; margin-right:2%;" class="middle-div">Middle Stuff</div> 
    <div style="float: right; width: 38%; position: relative; margin-right: 2%;" class="right-div">Right Stuff</div> 
    <br style="clear: left;" /> 
</div>

這裏有一個Fiddle

此外，你應該儘量避免使用內聯樣式這個樣子。相反，我建議你的東西沿着線：

/* CSS in style.css */ 
.parent-div { 
    position: relative; 
    margin-right: 40%; 
} 
.middle-div, .right-div { 
    position: relative; 
    float: left; 
} 
.middle-div { 
    width: 58%; 
    margin-right: 2%; 
} 
.right-div { 
    width: 38%; 
    margin-right: 2%; 
}

那麼您的標記可以被簡化爲：

<div class="parent-div"> 
    <div class="middle-div">Middle DIV</div> 
    <div class="right-div">Right DIV</div> 
    <br style="clear: left;" /> 
</div>

來源

2014-01-21 06:19:57 monners

根據你的形象，你需要左側立柱液，右一個固定的：Demo

<div id="outerdiv"> 
     <div id="right">Right Stuff</div> 
     <div id="left">Middle Stuff</div> 
    </div> 

#outerdiv { 
    position: relative; 
    margin-right: 40px; 
    width: 100%; 
} 

#left { 
    float: left; 
    width: 55%; 
    position: relative; 
    border: 1px solid #000; 
} 

#right { 
    float: right; 
    width: 30%; 
    position: relative; 
    margin-right: 40px; 
    border: 1px solid #000; 
}

來源

2014-01-21 06:22:51 Era

-1

或者您可以使用響應網格系統就像百分比，而不是固定的寬度this

demo

來源

2014-01-21 06:26:38 salmon

沒有代碼，根本不回答問題。 – monners

更改框的大小時，用CSS

回答

相關問題