#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. Я отредактировал свой ответ и показал вам. удачи