0

У меня есть такая ситуация с двумя div`ами и правый иногда заходит под левый как этого избежать

<div class="main">
  <div class="title">Title</div>
  <div class="content">A lot of content...</div>
</div>

нужно что бы текст правого никогда не был под левым

введите сюда описание изображения

3 ответа 3

2

Можно сделать так..

.main {
  display: flex;
}
.title{
  width:20%;
}
.content{
  width:80%;
}
<div class="main">
  <div class="title">Lorem ipsum dolor sit amet</div>
  <div class="content">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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

1

Для правого блока задай свойство overflow: hidden

Вот пример:

.title {
  float: left;
  margin-right: 30px;
 }
 
 .content {
  overflow: hidden;
 }
<div class="main">
  <div class="title">Title</div>
  <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolor possimus impedit nesciunt soluta nisi
            commodi, praesentium illo perferendis quo eos cumque necessitatibus amet error explicabo, aperiam mollitia iusto
            delectus vitae minima! Ad maiores recusandae porro tempora eum blanditiis laborum voluptatem eos error nobis!
            Facilis laboriosam exercitationem et ratione culpa? Expedita veritatis, rerum at ad mollitia doloribus?
            Repellendus tenetur impedit voluptatibus iusto repudiandae minima eligendi illum laborum sunt aliquid, fuga dolor
            amet molestiae expedita, atque vel quo omnis obcaecati qui assumenda ab, possimus placeat nesciunt voluptate.
            Repellat commodi illo laborum perferendis. Ea modi incidunt quidem voluptatibus, ullam enim debitis quibusdam.</div>
</div>

2
  • Всё отлично, а как сделать что бы правый текст был справа, что бы если он маленький то он был не в центре, а справа Commented 4 янв. 2022 в 9:44
  • Тогда лучше сделать на flex. Для <div class="main"> задать свойство display: flex; justify-content: space-between
    – Cahandar97
    Commented 4 янв. 2022 в 9:48
0

td {
  vertical-align: top;
   min-width: 50vh;
   border: 3px solid;
   text-align: center;
}
  svg { height: 100% !important; width: 100%; }
<table border="2" cellpadding="5">
  <tr>
    <td>Title</td>
    <td rowspan="2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolor possimus impedit nesciunt soluta nisi commodi, praesentium illo perferendis quo eos cumque necessitatibus amet error explicabo, aperiam mollitia iusto delectus vitae minima! Ad maiores
      recusandae porro tempora eum blanditiis laborum voluptatem eos error nobis! Facilis laboriosam exercitationem et ratione culpa? Expedita veritatis, rerum at ad mollitia doloribus? Repellendus tenetur impedit voluptatibus iusto repudiandae minima
      eligendi illum laborum sunt aliquid, fuga dolor amet molestiae expedita, atque vel quo omnis obcaecati qui assumenda ab, possimus placeat nesciunt voluptate. Repellat commodi illo laborum perferendis. Ea modi incidunt quidem voluptatibus, ullam
      enim debitis quibusdam.</td>
  </tr>
  <tr>
    <td style="border: 3px solid red;"><svg viewBox="0 0 16 16"><path d="M0 0 16 16M 16 0 0 16" stroke="red" fill="none" stroke-width="1"/></svg></td>
  </tr>
</table>

3
  • Так делать в современном html/css не надо, это уже легаси) Commented 4 янв. 2022 в 11:12
  • @VladimirGonchar оно до сих пор работает. Правда с размерами иногда косячит. Для pixelperfect-верстки нужен прозрачный пиксель blank.gif, растягивается тегом <img/> до нужного размера.
    – DiD
    Commented 4 янв. 2022 в 13:05
  • Утрируя, и на бересте тоже можно писать до сих пор, но это не значит, что это хороший способ. Commented 4 янв. 2022 в 15:22

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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