The little girl is asking for help from experts to solve the div layout problem~Thank you in advance! _html/css_WEB-ITnose

本身是可以按照一排四个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选取数据库如下：
d3c5d84d962a08519c22c5fb5f7b4dd7
    0c6dc11e160d3b678d68754cc175188a
    0c6dc11e160d3b678d68754cc175188a
    3f7b3decd2dcafb07b84d2d3985d9f40{$row['Critere']}0f6dfd1e3624ce5465eb402e300e01ae 
16b28748ea4df4d9c2150843fecfba68
Eof;
}
?>



The function of javascript is as follows:
function SenFe_Com1(sid){
var div_array1 = document. getElementsByName("carre1");
if(div_array1[0].style.display=="none"){
for(i=0;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[i].style.display = "none" ;
}
document.getElementById("1").style.backgroundColor="#FF9999";
}
}

Reply Discussion (Solution)

There should be other styles that override the width attribute in your carre style.

All css posts are here

What browser and version are you using? Right-click on the div and select Inspect Element or press F12 to open the developer tools to see if the css style display and other attributes of the div are the same as you designed.

You can improve this a bit, use PHP to print the data, transfer it to the page in JSON format, and then use JS to receive the JSON data and let HTML format it. Your output tag is not a standard way of writing. Just output the data.
You can use debugging tools to see the specific errors in the

style.

There should be other styles that cover the width attribute in your carre style.

All css stickers are here


But it can be displayed normally when name is not used. I am just starting out, so my writing may be a bit messy and not up to standard. Hope you can give me some advice~

The css is as follows:
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%;
}


What browser and version are you using? Right-click on the div and select Inspect Element or press F12 to open the developer tools to see if the css style display and other attributes of the div are the same as you designed.

Using chrome, I found that the problem is that after adding the name tag, I cannot wrap the line. If there are three in total, put three in a row; if there are eight, put eight in a row. . .
When arranged eight times, it will automatically become div.carre 63px * 150px

You can improve this further, use PHP to print the data, use JSON format to transfer to the page, and then use JS Receive JSON data and let HTML format it. Your output tag is a non-standard way of writing. Just output the data.

Use the debugging tool to see the specific errors in the style.

I am a beginner, and I am self-study while practicing. The writing method may not be standard, so I hope you can give me some advice.
I don’t quite understand the method you are talking about. Are you saying that the div should not be output to directly output the data? I can't figure out the specific method. . . Can you be more specific or give an example? Thank you!


In chrome, press f12 to view element styles. The style should be overwritten~

Because you have display: flex; and flex-flow: row; in the style, the function of these two sentences is to arrange all elements in a row. After switching to

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

and using chrome, I found that the problem is that after adding the name tag, I cannot wrap the line. If there are three in total, put three in a row; if there are eight, put eight in a row. . .
When arranged eight times, it will automatically become div.carre 63px * 150px

In chrome, press f12 to view the element style.
The style should be overwritten~

Wow, it worked! Awesome, thank you, God~
I was just checking while writing to try to achieve the effect I wanted, so I didn’t fully understand what each sentence meant. It seems that we still need to study systematically.

Regarding display: flex, you can refer to: Css3-flexbox. Your existing styles can also be automatically wrapped. Add flex-wrap: wrap;, because the default is nowrap.
Flex now has three versions, which is very convenient for layout. However, IE was only partially supported in IE10 at the earliest. For XP users, the highest level can only be upgraded to IE8, so the compatibility is not very good.

Because you have display: flex; and flex-flow: row; in the style, the function of these two sentences is to arrange all elements in a row. After switching to

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

using chrome, I found that the problem is that after adding the name tag, I cannot wrap the line. If there are three in total, put three in a row; if there are eight, put eight in a row. . .
When arranged eight times, it will automatically become div.carre 63px * 150px

because you have display: flex; and flex-flow: row; in the style. , the function of these two sentences is to arrange all elements in a row. After switching to

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

using chrome, I found that the problem is that after adding the name tag, I cannot wrap the line. If there are three in total, put three in a row; if there are eight, put eight in a row. . .
When arranged eight times, it will automatically become div.carre 63px * 150px

Wow, it worked! Awesome, thank you, God~
I was just checking while writing to try to achieve the effect I wanted, so I didn’t fully understand what each sentence meant. It seems that we still need to study systematically.
I just replied to the wrong person. . . Hey, my brain is not working very well haha. . .

As mentioned above, return json. If you use a class library, such as jQuery, you can consider it. This will make the operation more convenient, such as

<?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

The current page is not very clear. And the required operations, the following is just a possible example of the client, no longer need the name, directly obtain the node element through the 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'});    }}

Wow, it worked! Awesome, thank you, God~
I was just checking while writing to try to achieve the effect I wanted, so I didn’t fully understand what each sentence meant. It seems that we still need to study systematically.
I just replied to the wrong person. . . Hey, my brain is not working very well haha. . .

Regarding display: flex, you can refer to: Css3-flexbox. Your existing styles can also be automatically wrapped. Add flex-wrap: wrap;, because the default is nowrap.
Flex now has three versions, which is very convenient for layout. However, IE was only partially supported in IE10 at the earliest. For XP users, the highest level can only be upgraded to IE8, so the compatibility is not very good.

Because you have display: flex; and flex-flow: row; in the style, the function of these two sentences is to arrange all elements in a row. After switching to

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

using chrome, I found that the problem is that after adding the name tag, I cannot wrap the line. If there are three in total, put three in a row; if there are eight, put eight in a row. . .
When arranged eight times, it will automatically become div.carre 63px * 150px

Master, can you help me explain the display: -moz-inline- The word stack? I couldn't find any information on the Internet that explains it clearly.

Reference: Cross-browser inline-block

Firefox 2 does not support inline-block, but it supports Mozilla's unique display attribute '-moz-inline-stack', which is the same as inline -block is more like it. Add it before display: inline-block. FF2 will ignore inline-block and keep -moz-inline-stack because it does not understand inline-block. Browsers that support inline-block will use inline-block and ignore the previous display attribute.

Master, can you help me explain the sentence display: -moz-inline-stack? I couldn't find any information on the Internet that explains it clearly.