在右侧固定宽度div，在左侧填充剩余宽度div

问题描述

有没有人碰巧知道有一个方法有2个div作为列，其中右边的div有固定的宽度，左边的div填充剩余空间。如果可以做到这一点？

我的尝试（呈现block1下方的block2）：

 < style> 
 .block1 {
 width：auto; 
 height：200px; 
 
 background-color：green; 
} 
 .block2 {
 float：right; 
 height：200px; 
 width：200px; 
 
 background-color：red; 
} 
< / style> 
 
< div class =block1> test1< / div> 
< div class =block2> test2< / div> 
  

解决方案

您可以这样做：

$ b

HTML：

 < div class =右>右< / DIV> 
< div class =left> left< / div> 
  

CSS：

  .left {
 background：red; 
 
} 
 .right {
 float：right; 
 width：200px; 
 background：green 
} 
  

检查这个实例

Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.

Does anyone happen to know if this can be done?

My attempt (renders block2 underneath block1):

<style>
.block1 {
   width: auto;
   height: 200px;

   background-color: green;
}
.block2 {
   float: right;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

解决方案

You can do it like this:

HTML:

<div class="right">right</div>
<div class="left">left</div>

CSS:

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

Check this live example http://jsfiddle.net/QHTeS/2/

这篇关于在右侧固定宽度div，在左侧填充剩余宽度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！