1

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

Пример того, как должен выглядеть конечный результат: Пример того, как должен выглядеть конечный результат:

В рамке сумма должна быть справой стороны, с левой — все остальное. Как только добавила линию, которая на скриншоте находиться над Total - все сразу слетело. Я много что перепробовала, но все не подходит.

Мой код сейчас выглядит так:

<div style="box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px;
  gap: 24px;
  background: #FFFFFF;
  border: 1px solid #D7D6DC;
  border-radius: 12px;
  align-self: stretch;">
  <th:block th:each="companyName : ${companyName}">
    <p style="line-height: 140%;
      color: #333333;
      font-size: 14px;
      flex: none;
      display: table;
      word-wrap: break-word;
      text-align: left;
      height: 100%;
      width: 80%;" th:text="${companyName}">пример название
    </p>
  </th:block>
  <th:block th:each="amount : ${amount}">
    <p style="line-height: 140%;
      color: #333333;
      font-size: 14px;
      flex: none;
      display: table;
      word-wrap: break-word;
      text-align: right;
      height: 100%;
      width: 10%;" th:text="${amount}"> сумма
    </p>
  </th:block>
  <div style="width: 408px;
    height: 0px;
    border: 1px solid #D7D6DC;
    flex: none;
    align-self: stretch;">
  </div>
</div>

Как мне сделать чтобы в рамке все текста отображались на своем месте (не зависимо от количества строк) и "разделяющая" полоса была на своем месте?

1 ответ 1

1

Полагаю что-то типо этого вам нужно было?
Не нужно полоску создавать, как отдельный объект, просто сумме задаёте border-top

<div style="
    max-width: 1000px;
    margin: 30px auto;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 32px;
  gap: 24px;
  background: #FFFFFF;
  border: 1px solid #D7D6DC;
  border-radius: 12px;
  flex-direction: column;
  ">
    <th:block th:each="companyName : ${companyName}"
    style="
        display: flex;
        justify-content: space-between;
        align-items: center;
    "
    >
        <p style="line-height: 140%;
      color: #333333;
      font-size: 14px;
      flex: none;
      display: table;
      word-wrap: break-word;
      text-align: left;
      height: 100%;
      width: 80%;" th:text="${companyName}">пример название продукта
        </p>
        <p>24$</p>
    </th:block>
    <th:block th:each="companyName : ${companyName}"
        style="
            display: flex;
            justify-content: space-between;
            align-items: center;
        "
    >
        <p style="line-height: 140%;
      color: #333333;
      font-size: 14px;
      flex: none;
      display: table;
      word-wrap: break-word;
      text-align: left;
      height: 100%;
      width: 80%;" th:text="${companyName}">пример название продукта
        </p>
        <p>24$</p>
    </th:block>
    <th:block th:each="amount : ${amount}"
        style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #D7D6DC;
        "
    >
        <p style="line-height: 140%;
      color: #333333;
      font-size: 14px;
      flex: none;
      display: table;
      word-wrap: break-word;
      height: 100%;
      width: 10%;" th:text="${amount}"> сумма
        </p>
        <p>48$</p>
    </th:block>
</div>

1
  • Спасибо! очень помогло!
    – vlr
    30 янв в 11:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.