Блог

Главная - Вопросы по программированию - Множественное эхо / печать с фиксированной позицией и встроенным блоком

Множественное эхо / печать с фиксированной позицией и встроенным блоком

#php #html #css #formatting #echo

#php #HTML #css #форматирование #эхо

Вопрос:

Я хочу сделать некоторое форматирование в html с помощью css, чтобы сделать мои данные презентабельными.

Мой php-код,

 echo '<br><div class="items">' . "id" .'</div>';
echo '<div class="colon"> : </div>';
echo '<div class="details">' . "12" . '</div>';

Мой css,

 .items,.details,.colon {
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.colon {
  position: fixed;
  left: 200;
}
.items {
    position: relative;
    margin-top: 5px;
    padding: 3px 2px 0 8px;
    width: auto;
    display: block; 
    text-align: right;
    margin : 0 auto;
    font-size: 12px;
    font-weight: bold; 
}
.details {
  font-size: 12px;
  font-weight: normal;
  text-align: left;
}

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

И результат, который я хочу, это, введите описание изображения здесь

Может кто-нибудь, пожалуйста, предложить?

Ответ №1:

Вы ищете display:flex; «Модуль гибкой компоновки коробки, упрощающий разработку гибкой адаптивной структуры макета без использования float или позиционирования».
Источник @ https://www.w3schools.com/css/css3_flexbox.asp

HTML

 <div class="flex-container">
<div class="item auto">auto</div>
<div class="item initial">initial</div>
<div class="item initial">initial</div>
</div>

Css:

 .flex-container{background-color:#f4f7f8;overflow:hidden;display:flex;margin:1em}
.item{margin:1em;padding:.5em;width:110px;min-width:0;background-color:#1b5385;color:#fff;font-family:monospace}
.initial{flex:initial}
.auto{flex:auto}

Рабочая версия codepen https://codepen.io/amarinediary/pen/VwaVMza

Комментарии:

1. я пробовал это с моим требованием, но я не могу исправить. Пожалуйста, помогите. Я не могу сделать 200 пикселей слева для класса двоеточия. Мне нужно сделать двоеточия видимыми на одной вертикальной линии.

2. Я не уверен, что понимаю вашу проблему, если вы не будете более понятны, я не смогу помочь

3. У меня есть весь вывод массива, который виден один под другим. Поэтому мне нужно, чтобы двоеточия были видны ровно один под другим на фиксированном расстоянии слева. И вся строка должна занимать только половину ширины окна, не заполненного. например ……….. идентификационный номер: 12………………………………………