Member 13863747 Ответов: 1

Положите 2 div бок о бок

У меня есть этот код ниже, который имеет 3 строки divs проблема в том, что я пытаюсь поставить красный фрукт и зеленый плод дивы бок о бок с промежутками между ними, но, похоже, ничего не работает, любая помощь будет очень признательна.

Что я уже пробовал:

Вот мой JSFiddle[^]

1 Ответов

Рейтинг:
11

User 7429338

Чтобы получить два дива бок о бок, вы можете поместить их в левый/правый плавающие дивы:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="//#" />
</head>
<body>
  <div>
    <div style="float:left;width:calc(50% - 5px);">
      <h3 class="class center">Red Fruits</h3>
      <div id="redid" class="redclass wrappingflexbox"></div>
    </div>

    <div style="float:right;width:calc(50% - 5px)">
      <h3 class="class center">Green Fruits</h3>
      <div id="greenid" class="greenclass wrappingflexbox"></div>
    </div>
  </div>

  <div style="clear:both">
    <h3 class="center class">Suggested Fruits</h3>
    <div id="randomid" class="randomclass wrappingflexbox top"></div>
  </div>
</body>
</html>


С вашим центральным стилем все фрукты будут находиться на одной линии, что, вероятно, не то, что вы хотите. Вы, вероятно, хотите, чтобы обернуть их:
.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}


Попробуйте это здесь: JSFiddle[^]

Member 13863747

Спасибо за сообщение, но извините, что я немного изменил свой код и попробовал ваш метод, он не работает, не могли бы вы взглянуть на мои новые коды? http://jsfiddle.net/c692p78e/1/

[no name]

Вы не скопировали основную часть, поплавок:левый и поплавок:правый :)

Member 13863747

Я добавил Но это выглядит так http://jsfiddle.net/c692p78e/2/

[no name]

Удалите это из вашей панели: таблица-макет: фиксированный;высота: 100%;ширина: 30%;
Итак: http://jsfiddle.net/856cpzjw/1/