Равноудаленные плавающие элементы , содержащие текст, нарушают макет

ProgramBox

Равноудаленные плавающие элементы , содержащие текст, нарушают макет

Post author:admin
Запись опубликована:5 апреля, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Следующий код изменен из статьи Криса Койера о равноудаленных элементах встроенного блока <div>.

Он используется, чтобы сделать элементы встроенного блока <div> равноудаленными (без необходимости гибкого или сетчатого макета).

Код работает просто отлично.

HTML:

Равноудаленные divs — метод встроенного блока

 <div class="cardbox">
  <div class="card">
  </div>

  <div class="card">
  </div>

  <div class="card">
  </div>
</div>

CSS:

  .cardbox
  {
    height: 125px;
    text-align: justify;
    border: 10px solid black;
    /* font-size: 0.1px;     IE 9 amp; 10 don't like font-size: 0; */
    min-width: 600px;
    /*background-color: peachpuff;*/
  }

  .cardbox::after
  {
    display: inline-block;
    content: '';
    width: 100%; 
  }

  .card
  {
    width: 150px;
    height: 125px;
    display: inline-block;
    border: 1px solid navy;
    background: lightblue;
  }

Однако здесь я изменил HTML, чтобы включить текст в <div>. (Первый <div> содержит цифру «1».) Макет немедленно прерывается:

HTML:

 <div id="container">
  <div>1</div>
  <div></div>
  <div></div>
</div>

Можно ли использовать этот метод, чтобы сделать элементы встроенного блока, содержащие текст, равноудаленными?

Если нет, как я могу сделать такие элементы равноудаленными? (Мой главный интерес здесь — сделать текстовые карточки равноудаленными.)

В этом упражнении я не хочу использовать макет flex или grid, поскольку этот фрагмент будет частью постепенно расширяемой веб-страницы.

1. Возможно ли вставить больше html-тегов внутри этих основных div ?

2. Да, но он все еще ломается.

3. Будет ли в каждом div текст? или есть вероятность, что некоторые из них будут пустыми?

4. @Mihai, в каждом div будет текст.

Ответ №1:

Просто добавьте vertical-align: top в card CSS. Я просто обновляю ваш код, надеюсь, это вам поможет. Спасибо

 .cardbox
  {
    height: 125px;
    text-align: justify;
    border: 10px solid black;
    min-width: 600px;
  }

  .cardbox::after {
    display: inline-block;
    content: '';
    width: 100%; 
  }

  .card {
    width: 150px;
    height: 125px;
    display: inline-block;
    border: 1px solid navy;
    background: lightblue;
    vertical-align: top;
  }

 <div class="cardbox">
  <div class="card">1</div>
  <div class="card"></div>
  <div class="card"></div>
</div>

1. Как я и сделал, я не прочитал весь вопрос. Он говорит, что не хочет использовать flexbox

2. Он просит избегать этих методов: «Для этого упражнения я не хочу использовать макет flex или grid, поскольку этот фрагмент будет частью постепенно расширяемой веб-страницы».

3. Спасибо @MihaiT за разъяснения. Я просто обновляю описание и фрагмент кода. Спасибо

4. Выглядит великолепно. Проверит наличие текстовых карточек и вернет.

5. Это самый простой из 2 опубликованных методов, поэтому я отмечаю его как правильный ответ. Спасибо за все ответы. Вот пример того, что я сделал с помощью этой техники — он показывает 3 текстовые карточки, равноудаленные друг от друга.

Ответ №2:

Вставляя вторичный элемент div внутри основного div . Мы можем найти обходной путь, используя position свойство div ‘s.

Я хочу придать вторичному элементу div absolute позицию, чтобы это не влияло на макет.

Эта технология используется, чтобы избежать использования flex или grid, как указано в вопросе.

Показать фрагмент кода

 .cardbox {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  min-width: 600px;
}

.cardbox::after {
  display: inline-block;
  content: '';
  width: 100%;
}

.card {
  width: 150px;
  height: 125px;
  display: inline-block;
  border: 1px solid navy;
  background: lightblue;
  position: relative;
}

.card--content {
  position: absolute;
  background: tomato;
}

 <div class="cardbox">
  <div class="card">
    <div class="card--content">
      1
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    1234
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    </div>
  </div>
</div>

Это было бы моим рекомендуемым решением.

Показать фрагмент кода

 .cardbox {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  min-width: 600px;
}

.cardbox::after {
  display: inline-block;
  content: '';
  width: 100%;
}

.card {
  width: 150px;
  height: 125px;
  display: inline-block;
  border: 1px solid navy;
  background: lightblue;
  position: relative;
}

.card--content {
  position: absolute;
  background: tomato;
  height: 100%;
  width: 100%;
}

 <div class="cardbox">
  <div class="card">
    <div class="card--content">
      1
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    1234
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    </div>
  </div>
</div>

Надеюсь, это поможет!