两个div，一个固定宽度，另一个，其余。

I've got two div containers.

我有两个div容器。

Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?

虽然一个div需要一个特定的宽度，但是我需要对它进行调整，这样，其他div将占用剩余的空间。我有办法做这件事吗?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

10 个解决方案

#1

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

参见:http://jsfiddle.net/SpSjL/(调整浏览器的宽度)

HTML:

HTML:

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

CSS:

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

您还可以使用display: table来完成，这通常是一种更好的方法:如何将输入元素放在与其标签相同的行上?

#2

You can use calc() Function of CSS.

您可以使用CSS的calc()函数。

Demo: http://jsfiddle.net/A8zLY/543/

演示:http://jsfiddle.net/A8zLY/543/

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

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

Hope this will help you!!

希望这能对你有所帮助!!

#3

It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.

现在是2017年，最好的办法是使用与IE10+兼容的flexbox。

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

#4

If you can flip the order in the source code, you can do it like this:

如果你可以在源代码中改变顺序，你可以这样做:

HTML:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS:

CSS:

.right {
  width: 250px;
  float: right;
}   

An example: http://jsfiddle.net/blineberry/VHcPT/

一个例子:http://jsfiddle.net/blineberry/VHcPT/

Add a container and you can do it with your current source code order and absolute positioning:

添加一个容器，您可以使用您当前的源代码顺序和绝对定位:

HTML:

HTML:

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

CSS:

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.

在这里，.left div从顶部、左侧和右侧样式获得一个隐式设置宽度，允许它填充#container中的剩余空间。

Example: http://jsfiddle.net/blineberry/VHcPT/3/

例如:http://jsfiddle.net/blineberry/VHcPT/3/

#5

If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).

如果您可以将它们包装在容器

中，您可以使用定位使左侧

锚定在左:0;右侧:250px，请参见本演示。现在我要说的是，这在IE6中是行不通的，因为只有

的一个角可以完全定位在页面上(请参阅这里的详细说明)。

#6

1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width

1-有一个包装器div，将边距和边距设置为2-使左边的div宽度为你所需要的宽度，使其浮动为左3-设置右侧的div边界为左侧宽度。

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

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

</div>

Hope this works for you!

希望这对你有用!

#7

There are quite a few ways to accomplish, negative margins is one of my favorites:

有很多方法可以实现，负边距是我的最爱之一:

http://www.alistapart.com/articles/negativemargins/

http://www.alistapart.com/articles/negativemargins/

Good luck!

好运！

#8

set your right to the specific width and float it, on your left just set the margin-right to 250px

将你的右对齐到特定的宽度并将其浮动，在你的左边设置了一个250px的margin-right。

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

#9

If you need a cross browser solution, you can use my approach, clear and easy.

如果您需要跨浏览器解决方案，您可以使用我的方法，清晰而简单。

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

#10

Use the simple this can help you

使用简单的方法可以帮助你。

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>