如何使div填充剩余的水平空间?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

我有两个div:一个在左边，一个在右边。左边的那个有固定的宽度，我想要右边的那个填充剩下的空间。

The one on the right side is the navigation and I want it to to fill the remaining space on it right side:

右边的是导航栏，我想让它填满右边的剩余空间:

#search {
    width: 160px;
    height: 25px;
    float: left;
    background-color: #ffffff;
}
#navigation {
    width: 780px;
    float: left; 
    /*background-color: url('../images/transparent.png') ;*/
    background-color: #A53030;
}

<div id="search">Text
</div>
<?php include("navigation.html"); ?>
<div id="left-column">
</div>

22 个解决方案

#1

This seems to accomplish what you're going for.

这似乎实现了你的目标。

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

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

#2

The problem that I found with Boushley's answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space. This is not the behavior I was looking for. After searching through lots of 'solutions' I found this awesome tutorial on creating three column pages.

我在Boushley的回答中发现的问题是，如果右边的列比左边的长，它就会绕着左边转，然后重新填充整个空间。这不是我想要的行为。在搜索了许多“解决方案”之后，我发现了这个关于创建三个列页面的很棒的教程。

The author offer's three different ways, one fixed width, one with three variable columns and one with fixed outer columns and a variable width middle. Much more elegant and effective than other examples I found. Significantly improved my understanding of CSS layout.

作者提出了三种不同的方法，一种是固定宽度，一种是有三个变量的列，一种是有固定外柱和可变宽度的中间。比我发现的其他例子更加优雅和有效。显著提高了我对CSS布局的理解。

Basically, in the simple case above, float the first column left and give it a fixed width. Then give the column on the right a left-margin that is a little wider than the first column. That's it. Done. Ala Boushley's code:

基本上，在上面的简单情况下，将第一列向左浮动，并给它一个固定的宽度。然后给右边的列一个比第一列宽一点的左边框。就是这样。完成了。阿拉巴马州Boushley的代码:

Here's a demo in Stack Snippets & jsFiddle

这是Stack Snippets & jsFiddle的演示

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

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

With Boushley's example the left column holds the other column to the right. As soon as the left column ends the right begins filling the whole space again. Here the right column simply aligns further into the page and the left column occupies it's big fat margin. No flow interactions needed.

在Boushley的例子中，左列包含右边的另一列。当左列结束时，右列又开始填满整个空间。在这里，右边的列只是在页面的更远处对齐，左边的列占据了它的大的脂肪边距。不需要流相互作用。

#3

The solution comes from the display property.

解决方案来自display属性。

Basically you need to make the two divs act like table cells. So instead of using float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div you need to set width:auto; also. The both divs should be placed into a 100% width container with the display:table property.

基本上，您需要使两个div像表单元格一样工作。因此，与使用float:left不同，您必须在两个div上都使用display:table-cell，对于dynamic width div，您需要设置width:auto;也。两个div都应该被放置到一个100%宽度的容器中，显示:table属性。

Here is the css:

css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

And the HTML:

HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

IMPORTANT:For Internet Explorer you need to specify the float property on the dynamic width div, otherwise the space will not be filled.

重要提示:对于Internet Explorer，您需要在dynamic width div上指定float属性，否则空间将不会被填充。

I hope that this will solve your problem. If you want, you can read the full article I wrote about this on my blog.

我希望这能解决你的问题。如果你愿意，你可以阅读我在我的博客上写的这篇文章的全文。

#4

Since this is a rather popular question, I'm inclined to share a nice solution using BFC.
Codepen sample of the following here.

由于这是一个相当流行的问题，我倾向于使用BFC共享一个不错的解决方案。下面的代码页示例。

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

In this case, overflow: auto triggers context behavior and makes the right element expand only to the available remaining width and it will naturally expand to full width if .left disappears. A highly useful and clean trick for many UI layouts, but perhaps hard to understand the "why it works" at first.

在这种情况下，overflow: auto触发上下文行为，使右元素只扩展到可用的剩余宽度，如果.left消失，它自然会扩展到全宽度。对于许多UI布局来说，这是一个非常有用和干净的技巧，但是一开始可能很难理解“为什么它会工作”。

#5

These days, you should use the flexbox method (may be adapted to all browsers with a browser prefix).

现在，您应该使用flexbox方法(可以使用浏览器前缀来适应所有浏览器)。

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

#6

If you don't need compatibility with older versions of certain browsers (IE 10 8 or less for example) you can use the calc() CSS function:

如果您不需要与某些浏览器的旧版本兼容(例如10个8或以下)，您可以使用calc() CSS函数:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

#7

@Boushley's answer was the closest, however there is one problem not addressed that has been pointed out. The right div takes the entire width of the browser; the content takes the expected width. To see this problem better:

@Boushley的回答是最接近的，但是有一个问题没有解决，并且已经被指出。右div获取浏览器的整个宽度;内容采用预期的宽度。更好地理解这个问题:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

http://jsfiddle.net/79hpS/

The content is in the correct place (in Firefox), however, the width incorrect. When child elements start inheriting width (e.g. the table with width: 100%) they are given a width equal to that of the browser causing them to overflow off the right of the page and create a horizontal scrollbar (in Firefox) or not float and be pushed down (in chrome).

内容在正确的位置(在Firefox中)，但是宽度不正确。当子元素开始继承宽度(例如，宽度为100%的表)时，它们会被赋予与浏览器相同的宽度，从而导致它们溢出页面右边，并创建一个水平滚动条(在Firefox中)或不浮动，并被下推(在chrome中)。

You can fix this easily by adding overflow: hidden to the right column. This gives you the correct width for both the content and the div. Furthermore, the table will receive the correct width and fill the remaining width available.

您可以通过向右列添加overflow: hidden来轻松地修复这个问题。这将为内容和div提供正确的宽度。此外，该表将接收正确的宽度，并填充其余可用的宽度。

I tried some of the other solutions above, they didn't work fully with certain edge cases and were just too convoluted to warrant fixing them. This works and it's simple.

我尝试过上面的一些解决方案，它们不能完全处理某些边缘案例，而且过于复杂，不值得修复它们。这很有效，也很简单。

If there are any problems or concerns, feel free to raise them.

如果有任何问题或顾虑，请随时提出。

#8

Here is a little fix for accepted solution, which prevents right column from falling under the left column. Replaced width: 100%; with overflow: hidden; a tricky solution, if somebody didn't know it.

这里有一个被接受的解决方案的小修正，它防止右列落在左列下面。取代宽度:100%;与溢出:隐藏;一个棘手的解决方案，如果有人不知道的话。

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

http://jsfiddle.net/MHeqG/2600/

[edit] Also check an example for three column layout: http://jsfiddle.net/MHeqG/3148/

[编辑]还可以检查三列布局的示例:http://jsfiddle.net/MHeqG/3148/

#9

Boushley's answer seems to be the best way to go in order to arrange this using floats. However, it isn't without its problems. Nested floating within the expanded element will not be available to you; it will break the page.

布希利的回答似乎是使用浮点数排列的最佳方式。然而，它也并非没有问题。扩展元素中的嵌套浮动对您来说不可用;它会打破这一页。

The method shown basically "fakes it" when it comes to the expanding element - it isn't actually floating, it's just playing along with the fixed-width floated elements using its margins.

当涉及到展开元素时，显示的方法基本上是“伪造它”——它实际上不是浮动的，它只是使用它的边距来处理固定宽度的浮动元素。

The problem then is exactly that: the expanding element isn't floated. If you try and have any nested floating within the expanding element, those "nested" floated items aren't really nested at all; when you try to stick a clear: both; under your "nested" floated items, you'll end up clearing the top-level floats as well.

那么问题就是:展开元素没有浮动。如果在展开元素中尝试使用任何嵌套的浮动，那么这些“嵌套”的浮动项根本就不是嵌套的;当你想要表达清楚的时候:两者都是;在“嵌套”浮动项下，最终还将清除顶层浮动。

Then, to use Boushley's solution, I'd like to add that you should place a div such as the following: .fakeFloat { height: 100%; width: 100%; float: left; } and place this directly within the expanded div; all the expanded div's contents should go then within this fakeFloat element.

然后，为了使用Boushley的解决方案，我想添加一个div，例如:.fakeFloat {height: 100%;宽度:100%;浮:左;}并将其直接放在扩展div中;所有扩展的div内容都应该在fakeFloat元素中。

For this reason, I'd recommend using tables in this specific case. Floated elements really aren't designed to do the expansion that you'd like, whereas the solution using a table is trivial. An argument is generally made that floating is more proper for layouts, not tables.. but you aren't using floating here anyways, you're faking it - and that sort of defeats the purpose of the stylistic argument for this specific case, in my humble opinion.

出于这个原因，我建议在这种情况下使用表。浮动元素并不是设计来实现你想要的扩展的，而使用表的解决方案是微不足道的。一般认为浮动更适合于布局，而不是表格。但是你并没有在这里使用浮点数，你是在装腔作势——在我的拙见中，这就破坏了这种特定情况下的文体论证的目的。

#10

I tried the above solutions for a liquid left, and a fixed right but non of them worked (I am aware the question is for the reverse but I think this is relevant). Here's what did work:

我尝试了以上的液体左边的解决方案，一个固定的右边但没有(我知道问题是相反的，但我认为这是相关的)。这是什么工作:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

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

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

#11

I had a similar problem and I found the solution here: https://*.com/a/16909141/3934886

我遇到了类似的问题，我在这里找到了解决方案:https://*.com/a/16909141/3934886

The solution is for a fixed center div and liquid side columns.

解决方案是一个固定的中心分区和液体侧列。

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

If you want a fixed left column, just change the formula accordingly.

如果你想要一个固定的左列，只需相应地改变公式。

#12

If you are trying to fill remaining space in a flexbox between 2 items, add the following class to a an empty div between the 2 you want to seperate:

如果你想在2个项目之间填充flexbox的剩余空间，在你想要分离的2个项目之间添加一个空div:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

#13

Use display:flex

使用显示:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

#14

/* * css */

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/* * html */

/ * * * / html

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

#15

I have a very simple solution for this ! //HTML

我有一个非常简单的解决方法!/ / HTML

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

//CSS

/ / CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Link: http://jsfiddle.net/MHeqG/

链接:http://jsfiddle.net/MHeqG/

#16

I had a similar issue and came up with the following which worked well

我也遇到过类似的问题，我想出了下面的方法，效果很好

CSS:

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

HTML:

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

This method won't wrap when the window is shrunk but will auto expand the 'content' area. It will keep a static width for the site menu (left).

该方法不会在窗口收缩时进行包装，但会自动扩展“内容”区域。它将保持站点菜单的静态宽度(左)。

And for auto expanding content box and left vertical box(site menu) demo:

自动展开内容框和左侧垂直框(站点菜单)演示:

https://jsfiddle.net/tidan/332a6qte/

https://jsfiddle.net/tidan/332a6qte/

#17

Try adding position relative, remove width and float properties of the right side, then add left and right property with 0 value.

尝试添加相对位置，移除右侧的宽度和浮动属性，然后添加0值的左右属性。

Also, you can add margin left rule with the value is based on the left element's width (+ some pixels if you need space in between) to maintain its position.

此外，您还可以根据左元素的宽度(如果需要中间的空间，还可以加上一些像素)来保持其位置。

This example is working for me:

这个例子对我有用:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

#18

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Try this. It worked for me.

试试这个。它为我工作。

#19

I wonder that no one used position: absolute with position: relative

我想知道没有人使用立场:绝对立场:相对立场

So, another solution would be:

所以，另一个解决方案是:

HTML

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Jsfiddle example

Jsfiddle例子

#20

I have been working on this problem for two days and have a solution that may work for you and anyone else trying to make a responsive Fixed width left and have the right side fill in the remainder of the screen without wrapping around the left side. The intention I assume is to make the page responsive in browsers as well as mobile devices.

我已经研究这个问题两天了，我有一个解决方案，可能对你和任何人都适用，试图做出一个响应固定宽度的左边，并让右边填充屏幕的其余部分，而不是环绕在左边。我的目的是使页面在浏览器和移动设备中都具有响应性。

Here is the Code

这是代码

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}

/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Here is my fiddle that may just work for you as it did for me. https://jsfiddle.net/Larry_Robertson/62LLjapm/

这是我的小提琴，可能对你有用，就像对我一样。https://jsfiddle.net/Larry_Robertson/62LLjapm/

#21

I ran into this same problem trying to layout some jqueryUI controls. Although the common philosophy now is "use DIV instead of TABLE", I found in my case using TABLE worked much better. In particular, if you need to have straightforward alignment within the two elements (e.g., vertical centering, horizontal centering, etc.) the options available with TABLE give simple, intuitive controls for this.

我在试图布局一些jqueryUI控件时遇到了同样的问题。虽然现在的通用原则是“使用DIV而不是TABLE”，但我发现在我的例子中使用TABLE的效果要好得多。特别地，如果您需要在两个元素(例如垂直定心、水平定心等)中有直接的对齐，可以使用TABLE提供的选项提供简单、直观的控件。

Here's my solution:

这是我的解决方案:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

#22

new to css. But I solved this problem by using inline-block. check this out: http://learnlayout.com/inline-block.html

新css。但是我用内联块解决了这个问题。看看这个:http://learnlayout.com/inline-block.html