浮动和宽度100％

我写这段代码：浮动和宽度100％

<body> 
<div> 
    <div style="padding:10px;float:left;height:500px;background-color:#ff6a00;"> 
     Div1 -> Floated 
    </div> 
    <div style="padding:10px;height:600px;background-color:#5c64bb;display:-webkit-flex"> 
     Div2 -> Not Floated 
    </div> 
</div>

而且结果是下面的图片，我能达到这个结果使用-webkit-FLEX显示其工作只是在镀铬有什么想法可以给我相同的结果。

顺便说一下，我不想为Div2使用margin-left，也不想使用div2。

enter image description here

来源

2013-10-20 Saeed Hamed

如果你不介意指定一个固定宽度，你的左边，你可以实现正确的这种柔性类型的布局：

<div style="display:table;width:100%;"> 
    <div style="display:table-cell;width:130px;vertical-align:top;"> 
     <div style="padding:10px;height:500px;background-color:#ff6a00;"> 
      Div1 
     </div> 
    </div> 
    <div style="display:table-cell;vertical-align:top;"> 
     <div style="padding:10px;height:600px;background-color:#5c64bb;"> 
      Div2 
     </div> 
    </div> 
</div>

http://jsfiddle.net/LHZKp/

来源

2013-10-20 15:07:09 Matthew

我能得到的第二个div和百分比宽度使用display: inline-block;类似的效果。

<div> 
    <div style="padding:10px;float:left;height:500px;background-color:#ff6a00;width:15%;"> 
     Div1 -> Floated 
    </div> 
    <div style="padding:10px;height:600px;width: 80%;background-color:#5c64bb;display:inline-block;"> 
     Div2 -> Not Floated 
    </div> 
</div>

fiddle

来源

2013-10-20 14:37:39 Joe

谢谢你的回答:)但正如你在标题中看到的，我想设置**宽度：Div2的100％**，有一种方法**显示：块**和**余量左**多达Div1宽度。 –

浮动和宽度100％

回答

相关问题