Css 两个div列。动态宽度

我想达到的目标是找到彼此相邻的div。一个是屏幕左侧的150px宽的菜单，第二个应该填满容器的其余部分

这就是我想到的：

但是，content div也在“under”菜单下，处理文本时，将其向右移动一点是不可能的。是否有可能使div“content”以某种方式变宽为“100%-150px”，并放在菜单div旁边

要实现这样的目标：

---

向左浮动，将div“置于”菜单div的旁边，填充效果很好，但我不知道如何使容器div的其余部分变宽。

取出

宽度：100%

（只需将其保留为

自动

，这是默认设置）并使用以下命令：

div.content{
    margin-left:150px;
    background: green;        
}

.

这样写：

CSS

.wrapper{
    overflow:hidden;
    padding-bottom:10px;
}
.first{
    float:left;
    height:200px;
    width:150px;
    background:red;
}
.second{
    overflow:hidden;
    height:200px;
    background:green;
}

HTML

<div class="wrapper">
    <div class="first">first</div>
    <div class="second">second</div>
</div>

第一
第二

检查这个

或

您也可以通过

display:table

属性来实现这一点，但它在IE8及以上版本之前都是有效的

检查此

签出。基本上，使用

框大小调整

、一些填充和负边距，您可以将两个元素排列到其容器的顶部。并使内容框延伸其父对象的范围

div.container{
 width: 90%;
 background: red;  
    display: inline-block;    
}

div.menu{
 width: 150px;
 float: left;
 background: blue; 
 display: inline;    
}

div.content{
     display: inline;
     float: left;
     width: 65%;
     background: green; 
     padding-left: 20px;    
}

---

我希望这对您有所帮助

您可以查看您的第一把小提琴，但已根据您的规格进行了更新，如下所示：

其工作原理是在第二个div上指定右边距，并将宽度保留为auto

HTMLI保持不变：

 <div class="container">
     <div class="menu">Menu to the left</div>
     <div class="content">Content of site<br>x<br><br><br><br><br></div>
 </div>

我拿走了

宽度：100%来自
div.content
并将其替换为
左边距：150px
正如你所看到的，你几乎做对了

编辑：奖励：（假）等高列

我用一些代码更新了fiddle，用CSS3创建了“”，这样看起来好像两个div都在向下扩展到容器的底部。您可以在这里看到：我不知道您是否真的需要它，但这是此类场景的常见需求

我只是在容器上放置了一个渐变背景，中间有一个硬挡块：

  background: linear-gradient(left, blue 150px, green 150px);

然后我用不同的供应商前缀扩展了它：

 background: -moz-linear-gradient(left, blue 150px, green 150px); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right top, color-stop(150px,blue), color-stop(150px,green)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(left, blue 150px, green 150px); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(left, blue 150px, green 150px); /* Opera 11.10+ */
 background: -ms-linear-gradient(left, blue 150px, green 150px); /* IE10+ */
 background: linear-gradient(left, blue 150px, green 150px); /* W3C */

我不知道你是否需要它，但有时这会非常有用
 使用简单的解决方案

<div class="container">
<div class="menu">Menu to the left</div>
<div class="content">Content of site<br>x<br><br><br><br><br></div>
</div>

div.container{
 width: 90%;
 height: 150px;
 background: red;        
}

div.menu{
 width: 150px;
 height: 100px;
 float: left;
 background: blue;        
}

div.content{
 background: green;        
 margin-left: 150px;
}


左边的菜单
网站内容
x






分区集装箱{
宽度：90%；
高度：150像素；
背景：红色；
}
分区菜单{
宽度：150px；
高度：100px；
浮动：左；
背景：蓝色；
}
部门内容{
背景：绿色；
左边距：150像素；
}

@ggzone实际上它将采用其内容的宽度。如果您删除
浮动
，则它将占用任何可用宽度。@MyHeadhatch会伤害您的右侧。。。刚刚交换了；）<编码>宽度：100%-150px由于无效而被忽略，因此它好像不存在。移除它，您的演示将以完全相同的方式运行。
<div class="container">
<div class="menu">Menu to the left</div>
<div class="content">Content of site<br>x<br><br><br><br><br></div>
</div>

div.container{
 width: 90%;
 height: 150px;
 background: red;        
}

div.menu{
 width: 150px;
 height: 100px;
 float: left;
 background: blue;        
}

div.content{
 background: green;        
 margin-left: 150px;
}