可是当我给div加了name属性,是为了选取数据库中我需要的数据。就无法正常排列了,div宽度被无视,也不自动换行,变成了这幅样子。。。。。
css代码如下:
.carre
{
text-align: center;
display: inline-block;
vertical-align: top;
height: 150px;
width: 150px;
margin: 20px;
background-color: #FFFFFF;
float: left;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
border-color: #FFFFFF;
color:#FF9999;
font-family: georgia;
}
php选取数据库如下:
<?php
$sql1 = "SELECT * from Test where Critere = '$critere1'";
$result = mysql_query($sql1,$con);
if($result === FALSE) {
die(mysql_error());
}
while( $row = mysql_fetch_array($result) ) {
echo <<<Eof
<div class="carre" name="carre1" style="display:none;">
<br>
<br>
<h4>{$row['Critere']}</h4>
</div>
Eof;
}
?>
javascript的function如下:
function SenFe_Com1(sid){
var div_array1 = document.getElementsByName("carre1");
if(div_array1[0].style.display=="none"){
for(i=0;i<div_array1.length;i++)
{
div_array1[i].style.display = "";
}
document.getElementById("all").style.display="none";
document.getElementById("1").style.backgroundColor="#a6e5e0";
}else{
for(i=0;i<div_array1.length;i++)
{
div_array1[i].style.display = "none";
}
document.getElementById("1").style.backgroundColor="#FF9999";
}
}
14 个解决方案
#1
应该有其他样式覆盖了你的carre这个样式中的width属性。
css贴全来
css贴全来
#2
使用的是什么浏览器和版本?在div上点右键,选审查元素或者按F12打开开发者工具看看div的css样式display和其他属性是否是你设计的一样。
#3
你这个可以再改进一下,用PHP打印数据出来,用JSON格式传到页面,再用JS接收JSON数据让HTML去排版,你输出标签是不标准的写法。只需要输出数据即可。
样式上面的错误用调试工具可以看到具体的
样式上面的错误用调试工具可以看到具体的
#4
可是没用name的时候就可以正常显示啊。在下初出茅庐,写得可能有点乱,不符合标准。望指教~
css如下:
table
{
text-align: center;
border: none;
border-collapse:collapse;
border-width: 2px;
font-family: optima;
}
tr
{
border-left: none;
border-right: none;
border-color: white;
border-width: 2px;
}
td
{
border-left: none;
border-right: none;
border-color: white;
border-width: 2px;
font-size: 16px;
}
td:hover{
background-color: #a6e5e0;
}
th
{
text-align: center;
border:none;
border-width: 2px;
}
aside
{
position: relative;
width:200px;
padding-top: 30px;
height: 1270px;
margin-bottom: 0;
float:left;
background-color: #FF9999;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.container1, aside
{
display: inline;
vertical-align: top;
text-align: center;
}
.container2, aside
{
display: inline;
vertical-align: top;
text-align: center;
}
.carre
{
text-align: center;
display: inline-block;
vertical-align: top;
height: 150px;
width: 150px;
margin: 20px;
background-color: #FFFFFF;
float: left;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
border-color: #FFFFFF;
color:#FF9999;
font-family: georgia;
}
.container1{
position: relative;
display: flex;
flex-flow: row;
background-color: #FFCC99;
height:100%;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
padding-left: 30px;
}
.container2{
position: relative;
display: flex;
flex-flow: row;
margin-bottom: 0;
}
html, body
{
margin:0;
height:1300px;
text-align: center;
}
body
{
text-align: center;
}
.wrapper
{
width: 1050px;
margin: 0 auto;
text-align: left;
height:100%;
}
#5
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
#6
在下是初学,边实习边自学,可能写法不标准,还望指教。
你说的这个方法我不是很懂,你是说不应该输出div直接输出数据吗?具体做法我没想出来。。。可以讲具体一点,或者举个例子吗?谢谢了!
#7
在chrome下,按f12,查看元素样式。
应该是样式被覆盖了~
应该是样式被覆盖了~
#8
因为你在样式里面有display: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
#9
哇,成功了!太棒了,谢谢大神~
我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。
#10
关于display: flex,可以参考:
Css3-flexbox,你现有的样式也可以自动换行的,加上flex-wrap: wrap;,因为默认是nowrap。
Flex现在有三个版本,很方便布局。但是IE最早也是在IE10部分支持,对于XP的用户,因为最高也只能升到IE8,所以兼容行不是很好。
Flex现在有三个版本,很方便布局。但是IE最早也是在IE10部分支持,对于XP的用户,因为最高也只能升到IE8,所以兼容行不是很好。
#11
因为你在样式里面有display: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
哇,成功了!太棒了,谢谢大神~
我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。
刚刚回错人了。。。哎脑子不太好使呵呵。。。

#12
楼上说的返回json,如果你使用类库,比如jQuery的话,可以考虑,这样有些操作方便点,比如
不是很清楚现在页面和需要的操作,下面只是举个客户端可能的例子,不再需要name,直接通过class获取节点元素
<?php
$sql1 = "SELECT Critere from Test where Critere = '$critere1'";//只取了你代码里面使用到的字段
$result = mysql_query($sql1,$con);
if($result === FALSE) {
die(mysql_error());
}
$rows = array();
while($row = mysql_fetch_array($result))
{
$rows[] = $row;
}
echo json_encode($rows);//输出json
不是很清楚现在页面和需要的操作,下面只是举个客户端可能的例子,不再需要name,直接通过class获取节点元素
$(function(){
LoadData();
});
function LoadData(){
$.getJSON('PHP数据页面地址').done(function(data) {
$('#container1').empty();//先清空
$.each(data.items, function(i, item) {
$('<div class="carre" style="display:none;"><br /><br /><h4>'+item.Critere+'</h4> ').appendTo("#container1");
});
});
}
function SenFe_Com1(sid){
var el = $('.carre1');
if(el[0].is(":visible") == false) {
el.show();
$('#all').hide();
$('#1').css({'background-color': '#a6e5e0'});
} else {
el.hide();
$('#1').css({'background-color': '#FF9999'});
}
}
哇,成功了!太棒了,谢谢大神~
我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。
刚刚回错人了。。。哎脑子不太好使呵呵。。。![]()
#13
关于display: flex,可以参考: Css3-flexbox,你现有的样式也可以自动换行的,加上flex-wrap: wrap;,因为默认是nowrap。
Flex现在有三个版本,很方便布局。但是IE最早也是在IE10部分支持,对于XP的用户,因为最高也只能升到IE8,所以兼容行不是很好。
因为你在样式里面有display: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
大神,能帮我讲一下display:-moz-inline-stack这句话吗?网上没查到讲得比较清楚的资料。
#14
参考:
跨浏览器的inline-block
Firefox 2 不支持 inline-block,但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’,这个属性和 inline-block 比较像。把它加在 display: inline-block 之前,FF2 会忽略 inline-block 而保留 -moz-inline-stack,因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。
大神,能帮我讲一下display:-moz-inline-stack这句话吗?网上没查到讲得比较清楚的资料。
#1
应该有其他样式覆盖了你的carre这个样式中的width属性。
css贴全来
css贴全来
#2
使用的是什么浏览器和版本?在div上点右键,选审查元素或者按F12打开开发者工具看看div的css样式display和其他属性是否是你设计的一样。
#3
你这个可以再改进一下,用PHP打印数据出来,用JSON格式传到页面,再用JS接收JSON数据让HTML去排版,你输出标签是不标准的写法。只需要输出数据即可。
样式上面的错误用调试工具可以看到具体的
样式上面的错误用调试工具可以看到具体的
#4
应该有其他样式覆盖了你的carre这个样式中的width属性。
css贴全来
可是没用name的时候就可以正常显示啊。在下初出茅庐,写得可能有点乱,不符合标准。望指教~
css如下:
table
{
text-align: center;
border: none;
border-collapse:collapse;
border-width: 2px;
font-family: optima;
}
tr
{
border-left: none;
border-right: none;
border-color: white;
border-width: 2px;
}
td
{
border-left: none;
border-right: none;
border-color: white;
border-width: 2px;
font-size: 16px;
}
td:hover{
background-color: #a6e5e0;
}
th
{
text-align: center;
border:none;
border-width: 2px;
}
aside
{
position: relative;
width:200px;
padding-top: 30px;
height: 1270px;
margin-bottom: 0;
float:left;
background-color: #FF9999;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.container1, aside
{
display: inline;
vertical-align: top;
text-align: center;
}
.container2, aside
{
display: inline;
vertical-align: top;
text-align: center;
}
.carre
{
text-align: center;
display: inline-block;
vertical-align: top;
height: 150px;
width: 150px;
margin: 20px;
background-color: #FFFFFF;
float: left;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
border-color: #FFFFFF;
color:#FF9999;
font-family: georgia;
}
.container1{
position: relative;
display: flex;
flex-flow: row;
background-color: #FFCC99;
height:100%;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
padding-left: 30px;
}
.container2{
position: relative;
display: flex;
flex-flow: row;
margin-bottom: 0;
}
html, body
{
margin:0;
height:1300px;
text-align: center;
}
body
{
text-align: center;
}
.wrapper
{
width: 1050px;
margin: 0 auto;
text-align: left;
height:100%;
}
#5
使用的是什么浏览器和版本?在div上点右键,选审查元素或者按F12打开开发者工具看看div的css样式display和其他属性是否是你设计的一样。
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
#6
你这个可以再改进一下,用PHP打印数据出来,用JSON格式传到页面,再用JS接收JSON数据让HTML去排版,你输出标签是不标准的写法。只需要输出数据即可。
样式上面的错误用调试工具可以看到具体的
在下是初学,边实习边自学,可能写法不标准,还望指教。
你说的这个方法我不是很懂,你是说不应该输出div直接输出数据吗?具体做法我没想出来。。。可以讲具体一点,或者举个例子吗?谢谢了!
#7
在chrome下,按f12,查看元素样式。
应该是样式被覆盖了~
应该是样式被覆盖了~
#8
因为你在样式里面有display: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
#9
在chrome下,按f12,查看元素样式。
应该是样式被覆盖了~
哇,成功了!太棒了,谢谢大神~
我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。
#10
关于display: flex,可以参考:
Css3-flexbox,你现有的样式也可以自动换行的,加上flex-wrap: wrap;,因为默认是nowrap。
Flex现在有三个版本,很方便布局。但是IE最早也是在IE10部分支持,对于XP的用户,因为最高也只能升到IE8,所以兼容行不是很好。
Flex现在有三个版本,很方便布局。但是IE最早也是在IE10部分支持,对于XP的用户,因为最高也只能升到IE8,所以兼容行不是很好。
因为你在样式里面有display: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
#11
因为你在样式里面有display: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
哇,成功了!太棒了,谢谢大神~
我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。
刚刚回错人了。。。哎脑子不太好使呵呵。。。

#12
楼上说的返回json,如果你使用类库,比如jQuery的话,可以考虑,这样有些操作方便点,比如
不是很清楚现在页面和需要的操作,下面只是举个客户端可能的例子,不再需要name,直接通过class获取节点元素
<?php
$sql1 = "SELECT Critere from Test where Critere = '$critere1'";//只取了你代码里面使用到的字段
$result = mysql_query($sql1,$con);
if($result === FALSE) {
die(mysql_error());
}
$rows = array();
while($row = mysql_fetch_array($result))
{
$rows[] = $row;
}
echo json_encode($rows);//输出json
不是很清楚现在页面和需要的操作,下面只是举个客户端可能的例子,不再需要name,直接通过class获取节点元素
$(function(){
LoadData();
});
function LoadData(){
$.getJSON('PHP数据页面地址').done(function(data) {
$('#container1').empty();//先清空
$.each(data.items, function(i, item) {
$('<div class="carre" style="display:none;"><br /><br /><h4>'+item.Critere+'</h4> ').appendTo("#container1");
});
});
}
function SenFe_Com1(sid){
var el = $('.carre1');
if(el[0].is(":visible") == false) {
el.show();
$('#all').hide();
$('#1').css({'background-color': '#a6e5e0'});
} else {
el.hide();
$('#1').css({'background-color': '#FF9999'});
}
}
哇,成功了!太棒了,谢谢大神~
我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。
刚刚回错人了。。。哎脑子不太好使呵呵。。。![]()
#13
关于display: flex,可以参考: Css3-flexbox,你现有的样式也可以自动换行的,加上flex-wrap: wrap;,因为默认是nowrap。
Flex现在有三个版本,很方便布局。但是IE最早也是在IE10部分支持,对于XP的用户,因为最高也只能升到IE8,所以兼容行不是很好。
因为你在样式里面有display: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。
排八个的时候就自动变成div.carre 63px * 150px
大神,能帮我讲一下display:-moz-inline-stack这句话吗?网上没查到讲得比较清楚的资料。
#14
参考:
跨浏览器的inline-block
Firefox 2 不支持 inline-block,但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’,这个属性和 inline-block 比较像。把它加在 display: inline-block 之前,FF2 会忽略 inline-block 而保留 -moz-inline-stack,因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。
大神,能帮我讲一下display:-moz-inline-stack这句话吗?网上没查到讲得比较清楚的资料。