Создание div float слева, но не "падение", если текст слишком длинный

Прошу прощения за ужасный титул.

По существу, у меня есть div, содержащий два div с position: relative; и float: left;. Первый div установлен на 200px (в силу его содержимого), потому что все, что он будет содержать, не предназначен для увеличения ширины.

Однако второй div я хочу расти только в стороне от содержащего div. Содержащая div не имеет ширины набора, так как у меня есть вертикальные экраны, и я знаю, что большинство людей имеют горизонтальную ориентацию. Я тестирую его на нескольких компьютерах, поэтому я знаю, как он выглядит в обеих версиях.

Однако, вернемся к точке, во второй div, если я добавлю фразу дольше, чем остальная часть содержащего div, то второй div опустится ниже первого div. Я не хочу, чтобы этот второй div имел заданную ширину, так что есть способ установить максимальную ширину? И если да, то есть ли способ установить его на то, что осталось с содержащим div? Мне бы очень хотелось, чтобы мне не пришлось снимать разрешение экрана, а что нет, так что, надеюсь, есть другой путь.

Спасибо за помощь.

Вырезать код и CSS на jsFiddle.net

Ответ 1

overflow - это волшебное слово.

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

Кроме того, правило .content div:last-child, которое у вас есть в вашем CSS, применяется к пустому очищающему div вместо второго столбца, поэтому он фактически ничего не делает.

Вот как это будет выглядеть (и обновленная скрипка):

<!doctype html>
<style>
.content {
  margin: 10px;
  padding: 0;
  border: 1px solid black;
  overflow: hidden; /* replaces <div class="clear"/> */
}

.columns {
  position: relative;
  float: left;
  padding-right: 20px;
  margin-bottom: 10px;
}

.c2 {
  float: none; /* Don't float this column... */
  overflow: hidden; /* ... Create a new block formatting context instead */
  padding-right: 10px;
  word-wrap: break-word;
}
</style>

<div class="content">
    <div class="columns">
        <img src="#" height="200px" width="200px" />
    </div>
    <div class="columns c2">
        TestingTestingTestingTesting
    </div>
</div>

Ответ 2

Я не уверен, нужен ли вам второй div, который будет плавать, но вот пример, который, кажется, делает то, что вы хотите, когда второй div имеет поплавок, но с добавлением маржи 200px.

http://jsfiddle.net/chrisvenus/ZdFwD/1/

Я также поменял изображения для DIV с фиксированной шириной, так как на моем браузере сломанное изображение просто удалялось.

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

это может быть не идеально для ваших нужд, но если это не должно быть хорошим началом.:)

Ответ 3

Вопрос был немного расплывчатым, но я думаю, что max-width - это то, что вам нужно - здесь образец HTML:

<html>
  <head>
    <style type="text/css">
      #wrap {
        position: relative;
      }

      .inner {
        position: relative;
        display: inline-block;
        float: left;
        max-width: 300px;
      }

      #one {
        border: 1px solid red;
        width: 200px;
      }

      #two {
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <div id="one" class="inner">Insert long text...</div>
      <div id="two" class="inner">Insert more long text...</div>
    </div>
  </body>
</html>

Надеюсь, я понял, что вы имели в виду правильно.