Question

我想要实现的目标，就是达到div，彼此相邻。一个是菜单，150px宽度，在屏幕的左边，第二个，应该填充容器的其余部分。

但是，竞争div也是＆＃34;＆＃34;＆＃34;菜单，并使用文本，向右移动一点是不可能的。有可能，制作div＆＃34;内容＆＃34;广泛用于＆＃34; 100％ - 150px＆＃34;不知何故，并被放在菜单div旁边？

实现这样的目标： http://jsfiddle.net/Ln49F/4/ 向左浮动，将div和＃34;放在＆＃34;旁边。菜单div，填充效果很好，但我不知道如何让它对于容器div的其余部分变宽。

Answer 1

取出width:100%（只需将其保留为auto，这是默认设置）并使用：

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

jsfiddle

Answer 2

像这样写：

<强> 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>

选中此http://jsfiddle.net/TbRuB/10/

或

您也可以使用display:table属性来实现这一目标，但直到IE8＆amp;上方。

选中此http://jsfiddle.net/TbRuB/12/

Answer 3

您可以查看您的第一个小提琴，但根据您的规范进行了更新，在此处：http://jsfiddle.net/ramsesoriginal/Ln49F/12/

这可以通过在第二个div上指定右边距，然后将宽度保留为auto。

来实现

HTML未更改：

 <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>

CSS与你的非常相似：

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

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

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

我从width: 100%;中删除了div.content，并将其替换为margin-left: 150px; 正如你所看到的，你几乎把它做对了！

编辑：BONUS :(假）等高柱！

我用一些代码更新了小提琴，用CSS3创建了“faux columns”，这样看起来好像两个div都在向下扩展到容器的底部。你可以在这里看到它：http://jsfiddle.net/ramsesoriginal/Ln49F/13/我不知道你是否真的需要它，但这是这类场景的常见要求。

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

  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 */

我不知道你是否需要它，但有时这可能非常有用！

Answer 4

使用简单的解决方案

<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;
}

http://jsfiddle.net/thirtydot/Ln49F/16/

Answer 5

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;    
}

look at this

我希望这有帮助

Answer 6

检查this fiddle。基本上，使用box-sizing，一些填充和负边距，您可以将两个元素排成直到其容器的顶部。并让内容框拉伸其父级的扩展。

两个div列。动态宽度为一

6 个答案: