Question

我在桌面视图上创建了3个并排放置在1行的div，但我希望每个div只能在移动设备上垂直堆叠。我无法为此找出正确的CSS代码/媒体查询。

这是我在帖子正文中使用的HTML div代码：

<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 1
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 2
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 3

以下是完整的HTML代码 - 我正在嵌入3张Instagram照片。

div style =＆＃34; float：left;宽度：30％; margin-right：3px;＆＃34;＆gt;

blockquote class =＆＃34; instagram-media＆＃34; style =＆＃34;背景：#FFF;边界：0; border-radius：3px; box-shadow：0 0 1px 0 rgba（0,0,0,0.5），0 1px 10px 0 rgba（0,0,0,0.15）;保证金：1px;填充：0;宽度：计算（100％ - 2px）;＆＃34;数据instgrm字幕=＆＃34;＆＃34;数据instgrm版本=＆＃34; 6＆＃34;＆GT;

div style =＆＃34; padding：1px;＆＃34;＆gt;

div style =＆＃34;背景：＃F8F8F8; line-height：0; margin-top：40px;填充：50.0％0; text-align：center;宽度：100％;＆＃34;＆gt;

一种风格=＆＃34;颜色：＃000; font-family：Arial，sans-serif; font-size：14px; font-style：normal; font-weight：normal; line-height：17px; text-decoration：none;自动换行：break-word;＆＃34; HREF =＆＃34; HTTPS：//www.instagram.com/p/BC2kmbmhTOY/"目标=＆＃34; _blank＆＃34;＆gt; #CherryBlossom #Doughnuts：带有#Cherry Filling的香草奶油芝士釉，以及巧克力（树）和樱桃黄油花可用的#CherryBlossomTree设计！ 3月15日至4月17日。

Astro Donuts（@astrodoughnuts）于2016年3月12日上午4:17发布的照片

/ DIV＆GT;

script src =＆＃34; // platform.instagram.com/en_US/embeds.js"异步=＆＃34;＆＃34;推迟=＆＃34;推迟＆＃34;＆GT;

/脚本＆GT;

/ DIV＆GT;

div style =＆＃34; float：left;宽度：30％; margin-right：3px;＆＃34;＆gt;

blockquote class =＆＃34; instagram-media＆＃34; style =＆＃34;背景：#FFF;边界：0; border-radius：3px; box-shadow：0 0 1px 0 rgba（0,0,0,0.5），0 1px 10px 0 rgba（0,0,0,0.15）;保证金：1px;填充：0;宽度：计算（100％ - 2px）;＆＃34;数据instgrm字幕=＆＃34;＆＃34;数据instgrm版本=＆＃34; 6＆＃34;＆GT;

div style =＆＃34; padding：1px;＆＃34;＆gt;

div style =＆＃34;背景：＃F8F8F8; line-height：0; margin-top：40px;填充：50.0％0; text-align：center;宽度：100％;＆＃34;＆gt;

一种风格=＆＃34;颜色：＃000; font-family：Arial，sans-serif; font-size：14px; font-style：normal; font-weight：normal; line-height：17px; text-decoration：none;自动换行：break-word;＆＃34; HREF =＆＃34; HTTPS：//www.instagram.com/p/BCq4otrp-ZW/" target =＆＃34; _blank＆＃34;＆gt;当鲜花开始绽放时，春天真正到来，而我们的#CherryBlossom马卡龙肯定已经开始展现它的花瓣了！甜美而微妙，它是完美的春季叮咬。 #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats

Olivia Macaron（@oliviamacaron）于2016年3月7日下午3:22发布的照片

/ DIV＆GT;

/ BLOCKQUOTE＆GT;

script src =＆＃34; // platform.instagram.com/en_US/embeds.js"异步=＆＃34;＆＃34;推迟=＆＃34;推迟＆＃34;＆GT;

/脚本＆GT;

/ DIV＆GT;

div style =＆＃34; float：left;宽度：30％; margin-left：3x;＆＃34;＆gt;

blockquote class =＆＃34; instagram-media＆＃34; style =＆＃34;背景：#FFF;边界：0; border-radius：3px; box-shadow：0 0 1px 0 rgba（0,0,0,0.5），0 1px 10px 0 rgba（0,0,0,0.15）;保证金：1px;填充：0;宽度：计算（100％ - 2px）;＆＃34;数据instgrm字幕=＆＃34;＆＃34;数据instgrm版本=＆＃34; 6＆＃34;＆GT;

div style =＆＃34; padding：1px;＆＃34;＆gt;

div style =＆＃34;背景：＃F8F8F8; line-height：0; margin-top：40px;填充：50.0％0; text-align：center;宽度：100％;＆＃34;＆gt;

一种风格=＆＃34;颜色：＃000; font-family：Arial，sans-serif; font-size：14px; font-style：normal; font-weight：normal; line-height：17px; text-decoration：none;自动换行：break-word;＆＃34; HREF =＆＃34; HTTPS：//www.instagram.com/p/BDJCBpnAi8f/"目标=＆＃34; _blank＆＃34;＆GT;快乐星期六！

Georgetown Cupcake（@georgetowncupcake）于2016年3月19日上午9:21发布的照片

/ DIV＆GT;

/ BLOCKQUOTE＆GT;

script src =＆＃34; // platform.instagram.com/en_US/embeds.js"异步=＆＃34;＆＃34;推迟=＆＃34;推迟＆＃34;＆GT;

/脚本＆GT;

/ DIV＆GT;

div style =＆＃34; clear：both;身高：1em;＆＃34;＆gt;

Answer 1

您需要在css中使用媒体查询来生成响应式布局。它不能使用内联样式完成。

至少和移动第一种方法：

<div>
SOURCE 1
</div>
<div>
SOURCE 2
</div>
<div>
SOURCE 3
</div>

<style>
    @media(min-width:768px){
        div {
            float:left;
            width:30%;
    margin-right:5px;
        }
    }
</style>

这里有三个堆叠的全宽divs。一旦浏览器或设备等于或超出768px的定义断点，新css就会生成css中定义的三个并排divs。

Answer 2

参见示例。您应该使用百分比尺寸

＆＃13;

.col{
  height: 100px;
  background-color: red;
  margin-bottom: 10px;
}

@media (min-width: 960px){
  .col{
    float:left;
    width: 30%
    margin-left: 10%;
  }
  .col:last-child{
    margin-left: 0%;
  }
}

＆＃13;

<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

＆＃13;

Answer 3

.block{     text-align: center; width:30%; margin:0px; padding:50px 0; float:left;}


@media only screen and (max-width: 767px) {
.block{ width:100%;}
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="block" style="    background: #f00;">
SOURCE 1
</div>
<div class="block" style="    background: #ccc;">
SOURCE 2
</div>
<div class="block" style="    background: #444;">
SOURCE 3
</div>

请检查希望，这样对您有很大帮助

Answer 4

有不同的方法可以执行此操作，但是两者都使用媒体查询。

您可以将每个div放在台式机上的display: inline-block上，然后将其更改为display: block在移动设备上。也许为每个div设置一个width: 33%（否则，如果您的div太长，它们将不能并排放置）。

或其他解决方案：将您的父元素放置在桌面上的display: flex上，然后将其重新放置在移动设备上的display: block上。

.sub { background-color: rgba(200,200,200,0.6); box-sizing: border-box; border-right: 1px solid black; padding: 5px; }

.first { display: flex; }
.first .sub { width: 33.3%; }

.second { display: block; margin-top: 20px; }
.second .sub { width: 100%; }

/* media queries for mobile */
@media (min-width: 320px) and (max-width: 480px) {
  .first { display: block; }
  .first .sub { width: 100%; }
}

<div class="first">
  <div class="sub">One</div>
  <div class="sub">Two</div>
  <div class="sub">Three</div>
</div>


<div class="second">
  <div class="sub">One</div>
  <div class="sub">Two</div>
  <div class="sub">Three</div>
</div>

Answer 5

使用<li>代替<div>，然后使用display:inline-block;或display:block;

移动响应部门

5 个答案: