Не могу двигаться вправо и влево, находясь в d flex

#html #css #reactjs #bootstrap-5

Вопрос:

У меня проблема, как вы можете видеть на рисунке ниже, я хочу, чтобы 1 был слева, а 2-справа. Что не так с моим кодом?

Изображение

 lt;div className="mt-5 mx-5 py-3 shadow bg-white"gt;  lt;div className="d-flex justify-content-center"gt;  lt;div style={{ float: "left", display: "flex" }}gt;  lt;div className="p-2"gt;1lt;/divgt;  lt;/divgt;  lt;div className="p-2 me-4"gt;Popular Productslt;/divgt;  lt;div className="p-2"gt;Low Privelt;/divgt;  lt;div className="p-2 ms-4"gt;High Pricelt;/divgt;  lt;div style={{ float: "right", display: "flex" }}gt;  lt;div className="p-2"gt;2lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

Ответ №1:

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

 lt;div className="mt-5 mx-5 py-3 shadow bg-white"gt;  lt;div className="d-flex justify-content-between"gt;  lt;divgt;  lt;div className="p-2"gt;1lt;/divgt;  lt;/divgt;   lt;div className="d-flex justify-content-center w-100"gt;  lt;div className="p-2 me-4"gt;Popular Productslt;/divgt;  lt;div className="p-2"gt;Low Privelt;/divgt;  lt;div className="p-2 ms-4"gt;High Pricelt;/divgt;  lt;/divgt;   lt;divgt;  lt;div className="p-2"gt;2lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  

Комментарии:

1. спасибо, как разместить реальную картинку вместо ссылок?

2. вы можете удалить w-100 в lt;div className=»d-flex-центр обоснования содержимого w-100″gt;

3. Я добавил еще один ответ для того, чтобы научить вас добавлять картинку

4. хорошо, большое тебе спасибо, хе-хе

5. Я отредактировал свой ответ и показал вам. удачи