Блог

Главная - Вопросы по программированию - Как создать адаптивный div, где внутри него есть квадрат и некоторые тексты

Как создать адаптивный div, где внутри него есть квадрат и некоторые тексты

#html #css

#HTML #css

Вопрос:

Ниже я пишу код, в этом коде я хочу сделать адаптивный «прямоугольник» и «квадрат», а также я хочу сделать повторный текст в теге p.

 #rectangle
{
    display: flex;
    width: 500px;
    height: 150px;
    background-color: brown;
}
#square
{
    width: 300px;
    height: 130px;
    background-color: chocolate;
    margin: 10px;
}  
 <div id="rectangle">
   <div id="square">

   </div>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente fugiat illo 
      dolorum assumenda commodi!
   </p>
</div>

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

1. этот вопрос слишком сложный, какой ответ вы хотите?

2. В этом вопросе я хочу спросить, как я создаю внешний div, идентификатор которого имеет «прямоугольник», и внутренний div, идентификатор которого имеет «квадратный» отзывчивый

Ответ №1:

Для ширины и высоты используйте % вместо px . Для текста добавьте идентификатор или класс, который определяет шрифт с использованием vw единицы измерения. Например:

 <div id="rectangle">
  <div id="square">

  </div>
  <p id='text'>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente 
    fugiat illo dolorum assumenda commodi!
  </p>
</div>
  
 #rectangle
{
    background-color: brown;
    display: flex;
    height: 8%;
    position: relative;
    width: 10%;
}
#square
{
    background-color: chocolate;
    height: 8%;
    margin: 10px;
    position: relative;
    width: 10%;
}
#text
{
    font-size: 2vw;
}

Ответ №2:

Вот так. Если вы хотите быстро реагировать, используйте % или vh / vw 

 #rectangle
{
    display: flex;
    width: 70vw;
    height: 40vh;
    background-color: brown;
    font-size: 2.3vw;
}
#square
{
    width: 100%;
    height: 100%;
    background-color: chocolate;
    margin-right: 3%;
     display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0; 
  height: 0; 
  border-left: 10vw solid transparent;
  border-right: 10vw solid transparent;
  border-bottom: 10vw solid black;
}  
 <div id="rectangle">
   <div id="square">
    <div class="arrow-up"></div>
   </div>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, iusto. Sapiente fugiat illo 
      dolorum assumenda commodi!
   </p>
</div>