How automatically adjust div's width using CSS?

问题

Consider the following example:

HTML:

<div class="wrapper">
    <div class="left">Some text here</div><div class="right">Hello Stack Overflow</div>
</div>

CSS:

.wrapper {
    border: 1px solid black;
    width: 400px;
}
.left {
    border: 1px solid green;
    display: inline-block;
}
.right {
    border: 1px solid red;
    display: inline-block;
    float: right;
}

I would like to force the width of the green div to be as big as possible, according to the width of the red one. The width of the red div can vary according to div's content. So, for example, if the width of the red div is 150px, the width of the green one should be 250px. This should always be true:

green div width + red div width = 400px

How could I achieve this using CSS ?

No Javascript please...

回答1:

As sandeep said earlier, but force the green div to take up as much space as possible.

.wrapper {
    border: 1px solid black;
    width: 400px;
    display:table;
}
.left {
    border: 1px solid green;
    display: table-cell;
    width: 100%;
}
.right {
    border: 1px solid red;
    display: table-cell;
}

Note that divs-as-tables is not supported by IE7 and below.

回答2:

make be that's you want http://jsfiddle.net/sandeep/eGphW/

.wrapper {
    border: 1px solid black;
    width: 400px;
    display:table;
}
.left {
    border: 1px solid green;
    display: table-cell;
}
.right {
    border: 1px solid red;
    display: table-cell;
}

you can use div as a table.

来源：https://stackoverflow.com/questions/5865368/how-automatically-adjust-divs-width-using-css

标签

css

html

width