Question

我有三个div，我想跨越浏览器的整个宽度（每个div占据屏幕的33％）。在移动版本上，我将每个div包装并下降到堆栈中，一个在另一个之上。但我希望每个div跨越100％的移动宽度。

我应该设置每个div宽度的宽度来实现此目的。当我将每个div的宽度设置为33％时，它适用于桌面版本，但在移动设备上，每个div都被挤压到33％的房地产。

<style type="text/css">
.wrapdiv {
 display: inline-block;
 margin: 0;
 vertical-align: top;
 padding:20px;
}
</style>


<div class="wrapdiv" style="">
</div>

<div class="wrapdiv" style="">
</div>

<div class="wrapdiv" style="">
</div>

Answer 1

您可以使用媒体查询使其具有响应性。代码显示当屏幕达到420px时，宽度将适用。

 @media screen and (max-width:420px){
    .wrapdiv{width:100%;}
    }

Answer 2

您需要使用媒体查询以及视口元素。这是一个简单的演示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div {
 width: 30%;
 float: left;
 padding:20px;
}

@media screen and (max-width: 600px) {
    div {
        width: 100%; 
        float: none;
    }
}

</style>
</head>
<body>

<div>
    Laborum, accusamus, reiciendis, esse aspernatur quam facere doloremque aliquam omnis suscipit nostrum in ducimus laudantium vero non iusto quae eius enim debitis officiis nesciunt! Id, quidem quis inventore corrupti optio.
</div>

<div>
    Laborum, accusamus, reiciendis, esse aspernatur quam facere doloremque aliquam omnis suscipit nostrum in ducimus laudantium vero non iusto quae eius enim debitis officiis nesciunt! Id, quidem quis inventore corrupti optio.
</div>

<div>
    Laborum, accusamus, reiciendis, esse aspernatur quam facere doloremque aliquam omnis suscipit nostrum in ducimus laudantium vero non iusto quae eius enim debitis officiis nesciunt! Id, quidem quis inventore corrupti optio.
</div>

</body>
</html>

Answer 3

Demo

HTML

<div id="example">
    <div id="block-1" class="wrapdiv">First</div>
    <div id="block-2" class="wrapdiv">Second</div>
    <div id="block-3" class="wrapdiv">Third</div>
</div>

CSS

.wrapdiv {
    display: table-cell;
    background:#ccc
}
/* will make each div 33% */
#example {
    display: table;
    width: 100%;
}
@media screen and (max-width:420px) {
    #block-1 {
        display: table-footer-group;
        border:1px solid red !important;
    }
    /* Will be displayed at the bottom of the pseudo-table */
    #block-2 {
        display: table-row-group;
        border:1px solid red !important;
    }
    /* Will be displayed in the middle */
    #block-3 {
        display: table-header-group;
        border:1px solid red !important;
    }
    /* Will be displayed at the top */
}

手机上的div宽度

3 个答案: