Блог

Рассмотрим следующий пример:

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

Я хотел бы сделать ширину зеленого div как можно больше, в соответствии с шириной красного. Ширина красной области div может варьироваться в зависимости от div содержимого. Так, например, если ширина красного div равна 150px, ширина зеленого должна быть 250px. Это всегда должно быть правдой:

 green div width   red div width = 400px
  

Как я мог бы добиться этого с помощью CSS?

Пожалуйста, никакого Javascript…

Как сказал Сандип ранее, заставьте зеленый div занимать как можно больше места.

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

Обратите внимание, что divs-as-tables не поддерживается IE7 и ниже.

сделайте так, как вы хотите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;
}
  

вы можете использовать div в качестве таблицы.