Поместите два div в одну строку с помощью CSS

У меня проблема с двумя div элементами. Как показано на скриншоте ниже, я хочу поместить PM и 8 в одну строку, чтобы это выглядело как 8 PM.

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

Я проверил другие решения и попытался добавить display: inline; или display: inline-block; в родительский div, но это не сработало.

Мой код для рендеринга Div:

.time: {
  height: 40px;
  width: 40;
}

.period: {
  font-size: 10px;
}

.hour: {
  font-size: 10px;
}
<div class="time">
  <div class="period">PM</div>
  <div class="hour">8</div>
</div>

Могу ли я получить некоторую помощь?


html css display
person kevin    schedule 21.01.2020    source источник
comment
Если вы хотите отобразить «8 PM», почему div PM находится перед 8 div?   -  person Marvin    schedule 21.01.2020
comment
Что он показывает, когда вы пытаетесь display: inline?   -  person Marvin    schedule 21.01.2020
comment
Отвечает ли это на ваш вопрос? Два блока div на одной строке   -  person Kundan    schedule 21.01.2020

Ответы (8)


arrow_upward
0
arrow_downward

  1. You have two typos:
    • It is font-size not ont-size.
    • Вы не ставите двоеточие после селекторов CSS
  2. Я не совсем уверен, почему display:inline не работал, но так как он не работал
  3. Используйте <span> вместо <div> вот так

.time {
  height: 40px;
  width: 40px;
}

.period {
  font-size: 10px;
}

.hour {
  font-size: 10px;
}
<div class="time">
  <span class="hour">8</span>
  <span class="period">PM</span>
</div>

person Marvin    schedule 21.01.2020

arrow_upward
0
arrow_downward

1) Удалить : из селекторов

2) Вы пропустили f в font-size

Теперь используйте from inline или inline-block :

Метод 1: использование inline следующим образом:

.time{
    height: 40px;
    width: 40;
}

.period{
    font-size: 10px;
    display:inline;
}

.hour {
    font-size: 10px;
    display:inline;
}
<div class="time">
    <div class="hour">8</div>
    <div class="period">PM</div>
</div>

Метод 2: используйте inline-block следующим образом:

.time{
   height: 40px;
   width: 40;
}

.period{
    font-size: 10px;
    display:inline-block;
}

.hour {
    font-size: 10px;
    display:inline-block;
}
<div class="time">
  <div class="hour">8</div>
  <div class="period">PM</div>
</div>

person Ehsan    schedule 21.01.2020

arrow_upward
0
arrow_downward

вы можете использовать flexbox и установить его на строку (или, в вашем случае, на обратную строку, поскольку они у вас задом наперёд)

.flexcontainer {
   display: flex;
   flex-direction: row-reverse;
   width:40px;
   height: 40px;
   font-size: 10px;
}
<div class="flexcontainer">
<div>PM</div>
<div>8</div>
</div>

person Bryan Dellinger    schedule 21.01.2020

arrow_upward
0
arrow_downward

Просто удалите : из кода CSS.

HTML

<div class="time">
   <div class="hour">8</div>
   <div class="period">PM</div>
</div>

CSS

.time {
  padding: 15px;
  display: inline-flex;
  box-shadow: 0px 0px 10px #3279e3;
}

.period {
  font-size: 10px;
}

.hour {
  ont-size: 10px;
}
person Sakkeer A    schedule 21.01.2020

arrow_upward
0
arrow_downward

Просто вы можете справиться с этим одним div.

<div>
<p>8<span>PM</span></p>
</div>
person anathema1998    schedule 21.01.2020

arrow_upward
0
arrow_downward

Добавьте свойство float: left css к классам .period и .hour, как показано ниже.

.period {
  font-size: 10px;
  float: left;
}

.hour {
  font-size: 10px;
  float: left;
}

Для простоты и сокращения строк кода вы можете определить свойство css только один раз, как показано ниже, для обоих классов, поскольку свойства обоих классов одинаковы.

.period, .hour {
  font-size: 10px;
  float: left;
}
person anees ma kader    schedule 21.01.2020

arrow_upward
0
arrow_downward

установите отображение .time div в сетку и установите количество столбцов сетки, которое вы хотите, это будет выглядеть так:

    .time{
      height: 40px;
      width: 40px;
      display : grid ;
      grid-template-columns: auto auto;
    }
    .period{
      font-size: 10px;
    }
    .hour{
      font-size: 10px;
    }
 <div class="time">
      <div class="hour">8</div>
      <div class="period">PM</div>
    </div>

person Shayan Moghadam    schedule 21.01.2020

arrow_upward
-1
arrow_downward

Вот очень короткое решение:

.time {
  display: flex;
  flex-direction: row;
  height: 40px;
  width: 40px;
}

.period: {
  ont-size: 10px;
}

.hour: {
  ont-size: 10px;
}
<div class="time">
  <div class="hour">8</div>
  <div class="period">PM</div>
</div>

Надеюсь это поможет. Наилучшие пожелания.

person Alberto Perez    schedule 21.01.2020
comment
Я предлагаю вам указать объяснение и исправить опечатки в CSS, которые также были у OP. - person Marvin; 18.03.2020