如何拉伸总是在正确的位置的最后一个div

我有制作布局的问题我的程序我只想要3个div固定在左侧，另一个div在右侧灵活（流体）。如何拉伸总是在正确的位置的最后一个div

这里是这是我使用的代码：

<!DOCTYPE html> 
<html> 
<style> 
    div{ 
    display:inline-block; 
    padding:20px; 
    border:1px solid blue 
    } 

.fluid{ 

} 
</style> 
<body> 
    <div style="width:100%"> 
    <div>123456</div> 
    <div>prahsant</div> 
    <div>123456</div> 
    <div class="fluid">123456</div> 
    </div> 

</body>

来源

2013-12-12 HD..

它不会占用剩余宽度 –

是？ http://jsfiddle.net/ – daker

我认为你正在寻找'浮动'，而不是'显示：行内块'。 –

试试这个：

<div class="main"> 
    <div class="side"> 
     <div class="sec">123456</div> 
     <div class="sec">prahsant</div> 
     <div class="sec">123456</div> 
     <div class="clr"></div> 
    </div> 
    <div class="fluid">123456</div> 
    <div class="clr"></div> 
</div> 

<style> 
.clr{clear:both} 

    .main{ 
     min-width:400px; /* 100px reserving for the fluid div*/ 
    } 
    .side{ 
     background:#CCC; 
     float:left; 
     width:300px; 
    } 
    .side .sec{ 
     float:left; 
     width:100px 
    } 
    .fluid{ 
     background:#F00 
    }</style>

演示在这里：http://jsfiddle.net/ashishanexpert/B8L6L/

来源

2013-12-13 09:08:26

也许这样的事情？我不使用浮动。

HTML

<div class="main"> 
    <div class="side"> 
     <div>123456</div> 
     <div>prahsant</div> 
     <div>123456</div> 
    </div> 
    <div class="fluid">123456</div> 
</div>

CSS

div { 
    display:inline-block; 
    padding:20px; 
    border:1px solid blue 
} 
div.main { 
    display: block; 
    position: relative 
} 
div.side { 
    position: absolute; 
    padding: 0; 
    top: 20px; 
    border: none; 
} 
div.fluid { 
    display: block; 
    margin-left: 290px; 
}

JsFiddle

- 编辑 -

删除width: 100%;当填充也被设置时发生溢出。

此方法适用于大多数宽度，但您可能需要在窗口重新调整为较小宽度时设置一些媒体查询。

来源

2013-12-12 15:46:22 AfromanJ

div.fluid display：block; margin-left：290px; }这里你修正了左边的大小......它可能是变化的..运行时间布局将会改变..任何一个修正div都可能被隐藏..然后它将无法工作 –

如何拉伸总是在正确的位置的最后一个div

回答

相关问题