响应网站的浮动div

我想为响应式网站浮动div，并且它无法正常工作。我需要它们按照下面的顺序排列，因为当屏幕变小时，它们需要先堆叠1，然后是2，堆叠3.第三个div在第一个div下面不会很好。任何帮助表示赞赏！响应网站的浮动div

<div class="1">info</div> 
<div class="2">info</div> 
<div class="3">info</div> 

.1 { 
width:23%; 
float:right; 
} 
.2 { 
width:76%; 
float:left; 
} 
.3 { 
float:right; 
width:23%; 
}

再说一遍，我需要“3”在“1”之下，但它在“2”之下。谢谢！

来源

2015-04-01 Amanda

这并没有帮助，它只是将它推到“2”以下。这是在dev网站上，访问受IP限制。 – Amanda 2015-04-01 11:24:01

您是否尝试过使用媒体查询并在移动设备上查看时清除div？给他们所有的100％的宽度，并明确：两者。然后它们应该堆叠在彼此的顶部。 – Lee 2015-04-01 11:54:39

Css类不应以数字开头。

Demo

.one { 
width:23%; 
float:right; 
} 
.two { 
width:76%; 
float:left; 
} 
.three { 
float:right; 
width:23%; 
}

来源

2015-04-01 11:16:28

这只是一个例子。真正的班级有一个名字。 – Amanda 2015-04-01 11:17:39

当你改变右侧和左侧。我会工作。我更新了小提琴。 – 2015-04-01 11:21:29

我想这是你想要Demo

* { 
     box-sizing: border-box; 
    } 
    .one { 
     width:23%; 
     float:left; 
    background-color: #333; 
    } 
    .two { 
     width:76%; 
     float:left; 
     background-color: #666; 
    } 
    .three { 
     float:left; 
     width:23%; 
     background-color: #ddd; 
    }

来源

2015-04-01 11:25:35

我猜使用内联块将正常工作。即使您调整窗口大小而不使用百分比宽度。

.one { 
    width:23%; 
    display: inline-block; 
    color: yellow; 

} 
.two { 
    width:76%; 
    display: inline-block; 
    color: orange; 
} 
.three { 
    display: inline-block; 
    color: red; 
    width:23%; 
}

Demo

来源

2015-04-01 11:50:46 Presse

谢谢，但没有奏效。 – Amanda 2015-04-01 14:20:49

你的代码是正确的，但CSS类不能启动或只包含一个数字。 DIV.two不NEDD浮动：

<div class="one">info 1</div> 
<div class="two">info 2</div> 
<div class="three">info 3</div>

而CSS：

.one { 
width:23%; 
float:right; 
background-color: yellow; 
} 
.two { 
width:76%; 
background-color: grey; 
} 
.three { 
float:right; 
width:23%; 
background-color: red; 
}

See the fiddle。

来源

2015-04-01 12:34:57

响应网站的浮动div

回答

相关问题