更改框的大小时，用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

回答

相关问题