Делаем div плавающим влево, но не «падаем», если текст слишком длинный - PullRequest
Новая
       0

Делаем div плавающим влево, но не «падаем», если текст слишком длинный

15 голосов
/ 10 августа 2011

Простите за ужасный заголовок.

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

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

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

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

Сокращение кода и CSS на jsFiddle.net

Ответы [ 3 ]

21 голосов
/ 10 августа 2011

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 голосов
/ 10 августа 2011

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

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

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

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

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

0 голосов
/ 10 августа 2011

Вопрос был немного расплывчатым, но я думаю, что 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>

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

...