100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 小女子求高手帮忙解决div布局问题~先谢过各大神!【HTML】

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

时间:2021-12-15 03:06:58

相关推荐

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

web前端|html教程

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

web前端-html教程

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

artdialog源码分析,vscode连服务器端连,ubuntu实验分析,tomcat源代码复杂吗,爬虫展,现在php开发主流版本,推广外包实力乐云seo包成功lzw

可是当我给div加了name属性,是为了选取数据库中我需要的数据。就无法正常排列了,div宽度被无视,也不自动换行,变成了这幅样子。。。。。

二维码源码,vscode一体机,ubuntu job,tomcat变成乱码怎么恢复,sqlite多少并发,网页设计职位有哪些,免费服务器租用,.net ajax上传图片插件,solid js前端框架,云函数爬虫,php简单实例,seo是指,springboot4啊,网站导航按钮,微信网页登录源码,discuz首页模板修改,ecshop网站后台批量上传图片,asp代码组建页面吗,易方虚拟主机管理系统6.9,手机在线视频采集程序lzw

css代码如下:

消消乐 js 源码,vscode附加文件乱码,Ubuntu桌面 开销,tomcat打开端口,sqlite3最后一条记录,爬虫容易,php 取变量名,seo主管需要具备哪些,美妆网站模板,metro win8 风格模板lzw

.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

{$row[‘Critere’]}

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”;

}

}

回复讨论(解决方案)

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

css贴全来

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

你这个可以再改进一下,用PHP打印数据出来,用JSON格式传到页面,再用JS接收JSON数据让HTML去排版,你输出标签是不标准的写法。只需要输出数据即可。

样式上面的错误用调试工具可以看到具体的

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

}

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

用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。

排八个的时候就自动变成div.carre 63px * 150px

你这个可以再改进一下,用PHP打印数据出来,用JSON格式传到页面,再用JS接收JSON数据让HTML去排版,你输出标签是不标准的写法。只需要输出数据即可。

样式上面的错误用调试工具可以看到具体的

在下是初学,边实习边自学,可能写法不标准,还望指教。

你说的这个方法我不是很懂,你是说不应该输出div直接输出数据吗?具体做法我没想出来。。。可以讲具体一点,或者举个例子吗?谢谢了!

在chrome下,按f12,查看元素样式。

应该是样式被覆盖了~

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

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

用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。

排八个的时候就自动变成div.carre 63px * 150px

在chrome下,按f12,查看元素样式。

应该是样式被覆盖了~

哇,成功了!太棒了,谢谢大神~

我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。

关于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: flex;和flex-flow: row;,这两句的作用就是所有元素按行排成一行。换成

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

用的chrome,我发现问题就在于加了name标签之后就无法换行。如果一共有三个,就一行排三个,有八个就排八个。。。

排八个的时候就自动变成div.carre 63px * 150px

哇,成功了!太棒了,谢谢大神~

我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。

刚刚回错人了。。。哎脑子不太好使呵呵。。。

楼上说的返回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) { $(

+item.Critere+

).appendTo("#container1"); }); });}function SenFe_Com1(sid){ var el = $(.carre1); if(el[0].is(":visible") == false) { el.show(); $(#all).hide(); $(#1).css({ackground-color: #a6e5e0}); } else { el.hide(); $(#1).css({ackground-color: #FF9999}); }}

哇,成功了!太棒了,谢谢大神~

我只是边写边查试着达到自己想要的效果,所以每句话什么意思并没有完全搞清楚。看来还是要系统地学习呢。

刚刚回错人了。。。哎脑子不太好使呵呵。。。

关于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这句话吗?网上没查到讲得比较清楚的资料。

参考: 跨浏览器的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这句话吗?网上没查到讲得比较清楚的资料。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。