html - Div 在桌面上显示为表格，但想要堆叠 div 以实现响应式设计

Question

我是 HTML 和 CSS 编码的新手，我正在寻找响应式设计的起点，以帮助我完成我正在从事的元素。

我基本上使用 div 创建了一个包含两列的表格(使用 div style="display: table;")，然后为每一列和每一行创建了 div。在每一行中，左列有一个图标，右列有文本。

我了解有关媒体查询的概念，并根据屏幕尺寸编写了我想要的查询。

我需要帮助的是我需要在查询中编写的内容的起点 - 本质上是调整 div 的大小并以不同方式显示 div(我想用 float )，以便我可以在左列显示图标在右栏中的图标上方。基本上，我想堆叠 div。我希望这是有道理的。我不完全确定从哪里开始。我提前感谢所有帮助。

这是我的 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){

}

Answer 1

这是我在 This Fiddle 中所做的基础知识:

1. 缩进。阅读没有缩进的代码很困难，并且会导致错误。
2. 删除了内联样式。
3. 将三级div 的CSS 设置为display: table-cell。请注意，此选择器应该/可以替换为一个类。
4. 将 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;
    }
}