Nano Hash - криптовалюты, майнинг, программирование

Как сделать так, чтобы текст не обтекал элемент, который плавает слева от него?

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

.comment-date {
  float: left;
}
<div class="comment-date">07/08 23:08</div>
<div class="comment-body">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</div>

Текст lorem ipsum обтекает дату. Я ожидаю, что он сохранит форму блока, плавающего справа от даты. Как я могу этого добиться?

Вот скрипт: http://jsfiddle.net/CS2Hs/

html css css-float
16.08.2012

Ответы:


1

Альтернативой другим решениям здесь было бы просто добавить margin-left к .comment-body. Также было бы полезно применить заданную ширину к .comment-date

.comment-date { 
  float: left;     
  font-weight: bold;    
  width: 90px;
}
.comment-body {
  margin-left: 90px;
}

Это гарантирует, что текст в .comment-body не появится под датой.

Вот демо:

--- jsFiddle DEMO ---

16.08.2012
  • Это интересное решение, но, к сожалению, мне нужно установить точную ширину поля даты. Я надеялся, что ширина поля просто увеличится до любого размера текста даты. Полезный ответ, но не идеальное решение :) 16.08.2012
  • В этом случае одно из приведенных ниже решений, в котором оба элемента плавают или используется inline-block, является вашим идеальным решением. Я решил, что лучше не повторять уже предоставленные ответы. 16.08.2012
  • К сожалению, все эти ответы требуют, чтобы я также установил ширину. И они требуют ширины на элементе body, где у вас это требуется только на дату. Так что мне больше всего нравится это решение на данный момент. 16.08.2012
  • @Ben174 Ben174 устанавливать ширину контейнера даты не обязательно. jsfiddle.net/CS2Hs/10 16.08.2012
  • @Xander - Да, но мне все еще нужно /знать/ ширину контейнера даты, чтобы выбрать ширину левого поля. 16.08.2012

    • 2

    Блока кузова нет в поплавковой модели. Просто установите float: left для .comment-body тоже. Кроме того, вы можете использовать некоторые ширины. См.: http://jsfiddle.net/CS2Hs/3/.

    16.08.2012
  • Я бы предпочел не использовать ширину. Но я не вижу способа сделать это без них. Я хочу, чтобы элемент body заполнил остальную часть страницы, но если я использую ширину, это не сработает. Если я использую проценты, я должен иметь представление о том, насколько широко растянется элемент даты. 16.08.2012
  • Вы можете разместить их относительно родительского контейнера, например: jsfiddle.net/CS2Hs/8. . Таким образом, ширина тела комментария остается переменной. 16.08.2012
  • Все еще требует, чтобы я расположил его на 110 пикселей влево. А если дата вырастет до 200 пикселей? 16.08.2012
  • Если вы хотите, чтобы оба были переменной ширины, вы можете прибегнуть к стилям отображения таблицы, например: jsfiddle.net/ CS2Hs/9. 16.08.2012
  • Ницца!! Это вообще похоже на взлом или это вполне приемлемо? 16.08.2012
  • Это похоже на взлом, но это совершенно правильный CSS и не затрагивает семантику HTML, так что все должно быть в порядке. 16.08.2012

    • 3

    Я постараюсь понять вашу проблему. Насколько я понимаю, вы хотите, чтобы .comment-body было справа, а .comment-date — слева, но на одной линии.

    Если я прав, может быть, это сработает:

    .comment-date {
    display: inline-block;
    float: left;
    width: 15%;
    font-weight: bold;
}
.comment-body {
    display: inline-block;
    float: right;
    width: 85%;
}

    Специально для вас я сделал JSFiddle ;)

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

    • 4

    jsfiddle, похоже, в данный момент не работает, так что извините, если это не работает / это не то, что вы хотели, но пробовали ли вы добавить «переполнение: скрытый» в «тело комментария»? Это создает новый контекст макета, который предотвращает обтекание текста под ним. Я нахожу это удивительно полезным! Надеюсь, это поможет!

    12.11.2013
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..