Блог

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

Как я могу сделать этот макет адаптивным?

#html #css

#HTML #css

Вопрос:

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

   <div class="parentdiv">
    <div><img src="img/noimage.png"></div>
    <div class="bottom">
      <p class="text1">Text1</p>
      <div class="btn_area">
        <a href="#" class="text2">Text2</a>
        <a href="#" class="text3">Text3</a>
      </div>
    </div>
  </div>

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

Я чувствую, что мне не следует рассылать спам с плавающей точкой и полями при создании макета. Есть ли какие-либо лучшие варианты для создания такого макета, который не будет катастрофически ломаться при изменении соотношения?

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

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

1. Пожалуйста, покажите нам ваш CSS-код, чтобы мы могли увидеть, что вы пробовали. Тогда мы можем помочь вам улучшить вашу попытку 🙂

2. Пожалуйста, покажите нам также ваш CSS

3. попробуйте с flex

4. Как вы хотите, чтобы выглядел ваш макет при изменении размера?

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

Ответ №1:

Попробуйте это и посмотрите, понимаете ли вы, что происходит. Я также добавлю руководство по CSS-Flex в качестве ссылки внизу. Убедитесь, что вы всегда публикуете имеющийся у вас код, то есть HTML и CSS для вопроса CSS и т.д. Я просто отвечаю прямо здесь, потому что ваш вопрос подразумевает, что вы только что попробовали floats. Это решение здесь, вероятно, потребует от вас изменить некоторые вещи, чтобы они идеально подходили, чтобы вы могли немного попрактиковаться с ним:

 body {
    width: 100vw;
    height: 100vh;
    /*We need a fixed height and width of the parent-Element to make % values work in the child elements*/
}
.parentdiv {
    width: 100%;
    /*Careful, when your Content inside of this gets close to the maximum width and height of this div you need to change width: 100% or the layout will overflow*/
    padding: 25px;
    height: 50%;
    /*This makes the Element a Flexbox-Element*/
    display: flex;
    /*sets the direction and the behaviour*/
    flex-flow: row nowrap;
}
    .left-area {
        width: 40%;
        display: flex;
        flex-flow: row nowrap;
        /*the following 2 attributes define where the content  is positioned inside the Flexbox-element*/
        justify-content: start;
        align-items: start;
    }
        .left-area img {
            width: 6rem;
            height: 6rem;
            /*I used the border to make the Img Look like yours cause i dont have the file*/
            border: 1px solid grey;
            border-radius: 50%;
        }
        .text1 {
            font-size: 1.5rem;
            color: grey;
            font-weight: bold;
        }
    .right-area {
        width: 15%;
        height: 50%;
        display: flex;
        /*Column-Reverse means that you have a column but you start at the bottom of it, like it is standing on its head*/
        flex-flow: column-reverse nowrap;
    }
        .btn_area{
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
            .text2 {
                font-size: 1.2rem;
                color: #7ad0bc;
                font-weight: bold;
            }
            .text3 {
                font-size: 1.2rem;
                color: #d96060;
                font-weight: bold;
            }  
 <div class="parentdiv">
    <div class="left-area">
        <img src="img/noimage.png" alt="no image available">
        <p class="text1">Text1</p>
    </div>
    <div class="right-area">
        <div class="btn_area">
            <a href="#" class="text2">Text2</a>
            <a href="#" class="text3">Text3</a>
        </div>
    </div>
</div>

Учебные пособия по CSS-Flex: учебное