4 DIV的响应式设计

Question

我在为较小的屏幕设计4 DIV的布局方面存在一些问题。

这是原始的HTML / CSS

<div id="a" style="float:left">aaaaaa</div>
<div id="b" style=float:left;margin-left:150px;>bbbbbb</div>
<div id="c" style="float:left;margin-left:150px;">ccccccc</div>
<div id="d" style="float:right;">dddddd</div>

这是网址：http://store.touchmedia.ca/mytest/scroller03.php

当屏幕宽度与桌面宽度相同时，它将水平显示4个div。但是当屏幕尺寸与iPad类似时，我希望它能够以2行显示。前两个DIV应该在第一行，接下来的两个DIV应该在第二行。对于手机，一个接一个垂直，我怎么能去做呢？

请告诉我一些问题，给我一些想法，我对网络开发很陌生，真的很感激。

Answer 1

我认为你甚至不需要媒体查询！您只需使用display: inline-block和对齐中心的固定宽度。

HTML

<div class="wrap">
    <div id="a" class="resp">aaaaaa</div>
    <div id="b" class="resp">bbbbbb</div>
    <div id="c" class="resp">ccccccc</div>
    <div id="d" class="resp">dddddd</div>
</div>

CSS

.wrap {text-align: center;}
.resp {display: inline-block; text-align: left; width: 21%; margin-right: 1%;}
.resp.fixed {width: 100px; margin-right: 10px;}

小提琴：http://jsfiddle.net/praveenscience/BrZFk/

Answer 2

您正在寻找CSS媒体查询

http://www.w3schools.com/css/css_mediatypes.asp

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

您可以根据尺寸

为元素设置不同的属性

@media (min-width: 980px) {
 .a { width:50%; }

}

@media (max-width: 980px) {
 .a { width:100%; }

}

Answer 3

您可以在不使用浮点数或媒体查询的情况下对齐元素！

使用text-align: justify我们可以让CSS在每个元素的父预定宽度上均匀分布每个元素。我发现这种方法比使用浮动和/或媒体查询更清晰。

如果您想知道:after伪选择器正在实现什么，它会创建一个中断，它会操纵DOM以使内容溢出，然后text-align: justify开始。

的 HTML 的

<div id="group">
    <div class="group_item">aaaa</div>
    <div class="group_item">bbbb</div>
    <div class="group_item">cccc</div>
    <div class="group_item">dddd</div>
 </div>

的 CSS 的

如果您想知道:after伪选择器正在实现什么，它会创建一个中断，这会欺骗操纵DOM以使text-align: justify被启动。

#group{
    text-align: justify;
}

#group div{
    display: inline-block;
}

#group:after{
    content: '';
    display: inline-block;
    width: 100%;
}

See it working!