小女子求高手帮忙解决div布局问题~先谢过各大神！

[roxyqiao]

本身是可以按照一排四个div排列的，自动换行。如下图：

可是当我给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";
}
}

[留校_察看]

你这个可以再改进一下，用PHP打印数据出来，用JSON格式传到页面，再用JS接收JSON数据让HTML去排版，你输出标签是不标准的写法。只需要输出数据即可。 样式上面的错误用调试工具可以看到具体的

[roxyqiao]

引用 1 楼 showbo 的回复:

应该有其他样式覆盖了你的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%; }

[roxyqiao]

引用 2 楼 save4me 的回复:

使用的是什么浏览器和版本？在div上点右键，选审查元素或者按F12打开开发者工具看看div的css样式display和其他属性是否是你设计的一样。

用的chrome，我发现问题就在于加了name标签之后就无法换行。如果一共有三个，就一行排三个，有八个就排八个。。。 排八个的时候就自动变成div.carre 63px * 150px

[roxyqiao]

引用 3 楼 zgxjj 的回复:

你这个可以再改进一下，用PHP打印数据出来，用JSON格式传到页面，再用JS接收JSON数据让HTML去排版，你输出标签是不标准的写法。只需要输出数据即可。 样式上面的错误用调试工具可以看到具体的

在下是初学，边实习边自学，可能写法不标准，还望指教。 你说的这个方法我不是很懂，你是说不应该输出div直接输出数据吗？具体做法我没想出来。。。可以讲具体一点，或者举个例子吗？谢谢了！

[弘毅致远]

在chrome下，按f12，查看元素样式。 应该是样式被覆盖了~

[save4me]

因为你在样式里面有display: flex;和flex-flow: row;，这两句的作用就是所有元素按行排成一行。换成

    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

引用 5 楼 roxyqiao 的回复:

用的chrome，我发现问题就在于加了name标签之后就无法换行。如果一共有三个，就一行排三个，有八个就排八个。。。 排八个的时候就自动变成div.carre 63px * 150px

[roxyqiao]

引用 7 楼 zuo_hy 的回复:

在chrome下，按f12，查看元素样式。 应该是样式被覆盖了~

哇，成功了！太棒了，谢谢大神~ 我只是边写边查试着达到自己想要的效果，所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。

[save4me]

关于display: flex，可以参考: Css3-flexbox，你现有的样式也可以自动换行的，加上flex-wrap: wrap;，因为默认是nowrap。 Flex现在有三个版本，很方便布局。但是IE最早也是在IE10部分支持，对于XP的用户，因为最高也只能升到IE8，所以兼容行不是很好。

引用 8 楼 save4me 的回复:

因为你在样式里面有display: flex;和flex-flow: row;，这两句的作用就是所有元素按行排成一行。换成

    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

[quote=引用 5 楼 roxyqiao 的回复:] 用的chrome，我发现问题就在于加了name标签之后就无法换行。如果一共有三个，就一行排三个，有八个就排八个。。。 排八个的时候就自动变成div.carre 63px * 150px

[/quote]

[roxyqiao]

引用 8 楼 save4me 的回复:

因为你在样式里面有display: flex;和flex-flow: row;，这两句的作用就是所有元素按行排成一行。换成

    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

[quote=引用 5 楼 roxyqiao 的回复:] 用的chrome，我发现问题就在于加了name标签之后就无法换行。如果一共有三个，就一行排三个，有八个就排八个。。。 排八个的时候就自动变成div.carre 63px * 150px

[/quote] 哇，成功了！太棒了，谢谢大神~ 我只是边写边查试着达到自己想要的效果，所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。 刚刚回错人了。。。哎脑子不太好使呵呵。。。

[save4me]

楼上说的返回json，如果你使用类库，比如jQuery的话，可以考虑，这样有些操作方便点，比如

<?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'});
    }
}

引用 11 楼 roxyqiao 的回复:

哇，成功了！太棒了，谢谢大神~ 我只是边写边查试着达到自己想要的效果，所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。 刚刚回错人了。。。哎脑子不太好使呵呵。。。

[斯洛文尼亚旅游]

应该有其他样式覆盖了你的carre这个样式中的width属性。 css贴全来

[save4me]

使用的是什么浏览器和版本？在div上点右键，选审查元素或者按F12打开开发者工具看看div的css样式display和其他属性是否是你设计的一样。

[roxyqiao]

引用 10 楼 save4me 的回复:

关于display: flex，可以参考: Css3-flexbox，你现有的样式也可以自动换行的，加上flex-wrap: wrap;，因为默认是nowrap。 Flex现在有三个版本，很方便布局。但是IE最早也是在IE10部分支持，对于XP的用户，因为最高也只能升到IE8，所以兼容行不是很好。 [quote=引用 8 楼 save4me 的回复:] 因为你在样式里面有display: flex;和flex-flow: row;，这两句的作用就是所有元素按行排成一行。换成

    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

[quote=引用 5 楼 roxyqiao 的回复:] 用的chrome，我发现问题就在于加了name标签之后就无法换行。如果一共有三个，就一行排三个，有八个就排八个。。。 排八个的时候就自动变成div.carre 63px * 150px

[/quote][/quote] 大神，能帮我讲一下display：-moz-inline-stack这句话吗？网上没查到讲得比较清楚的资料。

[save4me]

参考: 跨浏览器的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 而忽略之前的显示属性。

引用 13 楼 roxyqiao 的回复:

大神，能帮我讲一下display：-moz-inline-stack这句话吗？网上没查到讲得比较清楚的资料。