Div отображается как таблица на рабочем столе, но требуется складывать divs для адаптивного дизайна

ProgramBox

Div отображается как таблица на рабочем столе, но требуется складывать divs для адаптивного дизайна

Post author:admin
Запись опубликована:14 марта, 2023
Post category:Вопросы по программированию

#html #css #responsive-design

#HTML #css #адаптивный дизайн

Вопрос:

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

По сути, я использовал divs для создания таблицы с двумя столбцами (используя div style=»display: table;»), а затем divs для каждого столбца и строки. В каждой строке в левом столбце есть значок, а в правом столбце — текст.

Я понимаю концепцию медиа-запросов и написал нужные запросы на основе размеров экрана.

С чем мне нужна помощь, так это с отправной точкой для того, что мне нужно написать внутри запросов — по сути, изменить размер divs, а также отобразить divs по-другому (я полагаю, с плавающими значениями), чтобы значки в левом столбце отображались над значками в правом столбце. В принципе, я хочу сложить divs. Я надеюсь, что это имеет смысл. Я не совсем уверен, с чего начать. Я заранее признателен за любую помощь.

Вот мой HTML:

 <div style="display: table;">
<!--First row-->
<div id="tr1" style="display: table-row;">
    <div class="icon" style="display: table-cell;">
        <a href="http://www.facebook.com/"><img src="http://3.bp.blogspot.com/-E_DoZ3hZPZw/Uwl7yLn50_I/AAAAAAAAGr8/XpmeP14aphA/s1600/green.gif" width="300"></a></div>        

    <div class="words" style="display: table-cell;">
        <h1>Text title</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>
</div>

<!--Second row-->
<div id="tr2" style="display: table-row;">
        <div class="icon" style="display: table-cell;">
            <a href="http://www.twitter.com"><img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg" width="300"></a></div>
            <div class="words" style="display: table-cell;">
            <h1>Another text title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>

И вот мой CSS:

     .icon {position: relative; }

.words {position: static;
        vertical-align: middle;}

/* Mobile: Max Size for Mobile Device */
@media (max-width: 639px){

}

1. Во-первых, не используйте встроенные стили. Вам нужно переместить display стили в ваш css, а затем в ваших медиа-запросах вы можете заставить стили отображения отличаться, чтобы они складывались. Кроме того, удалите display: table из родительского div — при использовании table-cell браузеры достаточно умны, чтобы определить этот стиль, и это на одну проблему меньше, когда вы переходите к своим медиа-запросам.

2. О, это имеет смысл! Я не понимал, что браузеры определяют стиль ячейки таблицы. Это определенно помогает. Спасибо!

Ответ №1:

Вот основы того, что я сделал в этой скрипке:

Отступ. Чтение кода без отступов затруднено и приводит к ошибкам.
Удалены встроенные стили.
Установите CSS для divs третьего уровня display: table-cell равным . Обратите внимание, что этот селектор должен / может быть заменен классом.
Добавил css в ваш медиа-запрос, чтобы заставить их «складываться» в соответствии с запросом.

Вот пересмотренный код для вашей справки:

 <!-- Removed the "display: table" - not necessary -->
<div>
    <!--First row-->
    <!-- Remove the "display: table-row" - not necessary -->
    <div id="tr1">
            <!-- Remove the "display: table-cell" - moved to css -->
        <div class="icon">
            <a href="http://www.facebook.com/"><img src="http://3.bp.blogspot.com/-E_DoZ3hZPZw/Uwl7yLn50_I/AAAAAAAAGr8/XpmeP14aphA/s1600/green.gif" width="300"></a>
        </div>        
        <div class="words">
            <h1>Text title</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p>
        </div>
    </div>

    <!--Second row-->
    <div id="tr2">
        <div class="icon">
            <a href="http://www.twitter.com"><img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg" width="300"></a>
        </div>
        <div class="words" style="display: table-cell;">
            <h1>Another text title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p>
        </div>
    </div>
</div>

CSS:

 /* this selects third-level divs */
div > div > div {
    display: table-cell;
}

.icon {
    position: relative; 
}

.words {
    vertical-align: middle;
}

/* Mobile: Max Size for Mobile Device */
@media (max-width: 639px) {
    /* change the display to block for stacking */
    div > div > div {
        display: block;
    }
}

Ответ №2:

Все дело в переписывании. Итак, вот кое-что, что может вас вдохновить.

 <div class="wrapper">
<!--First row-->
<div id="tr1" class="row">
<div class="icon">
    <a href="http://www.facebook.com/"><img src="http://3.bp.blogspot.com/-E_DoZ3hZPZw/Uwl7yLn50_I/AAAAAAAAGr8/XpmeP14aphA/s1600/green.gif"></a></div>        
<div class="words">
    <h1>Text title</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>
</div>
<!--Second row-->
<div id="tr2" class="row">
    <div class="icon">
        <a href="http://www.twitter.com"><img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"></a></div>
        <div class="words">
        <h1>Another text title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet fermentum arcu, elementum dapibus nulla. Donec quis libero in risus gravida rutrum. Vestibulum vitae.</p></div>
        </div>
    </div>

И css:

 .icon {
position: relative;
display: table-cell; }
.icon a img {
    width: 300px;
}.words {
position: static;
    vertical-align: middle;
    display: table-cell;
}
.row {
    display: table-row;
}
.wrapper {
    display: table;
}
/* Mobile: Max Size for Mobile Device */
@media (max-width: 639px){
.wrapper,
.row,
.words,
.icon {
    display: block;
}
.words,
.icon {
    text-align: center;
}
.icon a img {
    display: inline-block;
    width: 100%;
    max-width: 300px;
}
}

Надеюсь, это поможет.