CSS: два поля, одна гибкая ширина, правый занимает оставшееся пространство 

------------- --------------------------------------------------
| some text | | some more text, sometimes more, sometimes less |
------------- --------------------------------------------------

|<------------------------- 100% width ----------------------->|

Итак, у меня есть вышеупомянутый макет. Левый флажок всегда должен быть как можно меньше, а правый - занимать оставшееся пространство. Обычно это нормально с float: left.

Проблема в том, что правый ящик может расти довольно много, в то время как левый в значительной степени гарантированно очень мал (, но по размеру, поэтому он должен быть гибким). Если правый квадрат растет, мне нужно, чтобы он вел себя так:

------------- --------------------------------------------------
| some text | | quite a lot of text, actually, really quite a  |
------------- | bunch of it, you could say this is really      |
              | quite a heck of a lot of text                  |
              --------------------------------------------------

Если я использую float:left, правый поле будет разбиваться на строки под левым полем, если он содержит много текста:

-------------
| some text |                                         (not good)
-------------
----------------------------------------------------------------
| quite a lot of text, actually, really quite a bunch of it,   |
| you could say this is really quite a heck of a lot of text   |
----------------------------------------------------------------

Если я использую таблицу для обоих, левое поле может увеличиться без необходимости, если оба содержат очень мало текста:

                                                      (not good)
-------------------------------- -------------------------------
| some text                    | | not that much text          |
-------------------------------- -------------------------------

Кроме того, левый флажок не должен прерываться. Но поскольку он содержит несколько элементов HTML, а не только чистый текст, no-wrap, похоже, не работает во всех браузерах.

Какое хорошее решение этой проблемы?

ИЗМЕНИТЬ

На самом деле не очень важно, чтобы правый квадрат занимал оставшуюся ширину, так что он всегда остается прикрепленным к правой стороне левого поля.

Ответы

Ответ 1

В правом поле используйте overflow: hidden; width: auto; вместо плавающего. Это должно занять оставшееся пространство, не опускающееся ниже, независимо от того, сколько контента там. Продолжайте плавать в левом поле.

Ответ 2

Определите фиксированную ширину в левом столбце, а также float:left; поместите его после главного столбца в HTML

Два div для правого столбца; внешний - также левый и со 100% шириной, внутренний - с левым краем той же ширины, что и левый столбец.

Ответ 3

Как предложил Stobor: попробуйте положить левую рамку в нужное поле

<div id="rightBox">
   <div id="leftBox">This text will expand the left box</div>
   <div style="float:left">
      Content of right box goes here<br>
      Breaking even works...
   </div>
</div>

CSS

#rightBox {
   width: 100%;
   background: red;
}
#leftBox {
   width: auto;
   float: left;
   background: blue;
}

Работает для меня.

Ответ 4

Если вы используете чистое решение css, я думаю, вам придется дать одному из столбцов какое-то ограничение ширины. Может ли это определенно не быть процентом, как указано выше?

Проблема в 2 раза. Если вы плаваете один столбец и присваиваете другой ширину 100%, потому что плавающий столбец удален из потока документов, 100% -ная ширина другой - это полная ширина окна просмотра (он игнорирует плавающий div). Если вы плаваете без установки ширины второго div, div будет (должен) уменьшаться до ширины самого широкого дочернего элемента. спецификация w3c, возможно, какая-то помощь, хотя это не самое легкое чтение.

Вы всегда можете попробовать использовать javascript для чтения ширины окна просмотра, а затем для установки ширины столбца, иначе я думаю, что вы собираетесь бороться.

Ответ 5

Вы также можете попробовать настроить отображение оболочки в таблицу, а дочерние элементы - на таблицу. Затем вы можете установить одну ширину и высоту div как фиксированные значения пикселей, а другую (динамическую) ширину div до 100%.

<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#container{
  border: solid #222 1px;
  width: 400px;
  height: 360px;
  resize: both;
  overflow: auto;
}

#wrap{
  border: solid red 1px;
  width: 100%;
  height: 100%;
  display: table;
  resize: both;
  overflow: auto;
}

video{
  border: solid #222 4px;
  display: table-cell;
  width: 160px;
  height: 160px;
}

#list{
  border: solid #222 4px;
  display: table-cell;
  width: 100%;
  height: 100%;
}
</style>
<div id="container">
  <div id="wrap">
    <video controls></video>
    <br>
    <div id="list"></div>
  </div>
</div>

Бросьте щенка в там!

ps: не уверен, как сделать это вертикально tho: (

ИЗМЕНИТЬ!!!

ВЕРТИКАЛЬ:      * {     -webkit-box-size: border-box;        -moz-box-size: border-box;             box-size: border-box;   }

#container{
  border: solid #222 1px;
  width: 400px;
  height: 360px;
  resize: both;
  overflow: auto;
}

#wrap{
  border: solid red 1px;
  width: 100%;
  height: 100%;
  display: table;
  resize: both;
  overflow: auto;
}

video{
  border: solid #222 4px;
  display: table-cell;
  width: 160px;
  height: 160px;
}

#median{
  display: table-row;
  width: 100%;
}

#list{
  border: solid #222 4px;
  display: table-cell;
  width: 100%;
  height: 100%;
}
</style>
<div id="container">
  <div id="wrap">
    <video controls></video>
    <div id="median"></div>
    <div id="list"></div>
  </div>
</div>