100分，css的布局问题，有示例代码,请各位大神前来一观_html/css

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Basic Tabs - jQuery EasyUI Demo</title>    <style type="text/css">.divquery{    background: blue;     float:left;}.qitem {    display:inline-block;    line-height:30px;    text-align:right;        width:250px;        height:25px;    overflow:hidden;    background: green;}.divbtn{    float:left;    width:120px;    background: red;    height:25px;    right:10px; }</style></head><body>        <div class="divquery">                    <span class="qitem">            查询项目            </span>            <span class="qitem">            查询项目            </span>            <span class="qitem">            查询项目            </span>            <span class="qitem">            查询项目            </span>            <span class="qitem">            查询项目            </span>        </div>        <div class="divbtn">            查询        </div></body></html>

Copier après la connexion

1.红色的div和蓝色的div并列，当页面宽度变化的时候，红色的div的宽度固定，蓝色的div宽度自适应
2.绿色的div宽度固定，当宽度不够的时候，绿色的div能换行排列，这个时候，蓝色div的高度就发生了变化，要求红色div的高度也随之变化

现在的情况是，红色的div经常跑到蓝色下面去，而且，红色div的高度不会变化:如图:

下午发了一个帖子，当时大致实验了一下，发现没问题，就结贴了，晚上仔细看，还是有点问题的，所以再开一贴来问问

回复讨论(解决方案)

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>Basic Tabs - jQuery EasyUI Demo</title>		<style type="text/css">			.content{				width:100%;				margin-right:120px;				display: table;			}			.divquery{				background: blue;				display: table-cell;				vertical-align: top;			}			.qitem{				display:inline-block;				line-height:30px;				text-align:right;				width:250px;				height:25px;				overflow:hidden;				background: green;			}			.divbtn{				width:120px;				background: red;				display: table-cell;				vertical-align: top;			}		</style>	</head>	<body>		<div class="content">			<div class="divquery">				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>			</div>			<div class="divbtn">				查询			</div>		</div>	</body></html>

Copier après la connexion

二楼正解，display布局方式
table：指定对象作为块元素级的表格。类同于html标签

inline-table：指定对象作为内联元素级的表格。类同于html标签

table-caption：指定对象作为表格标题。类同于html标签

http://css.doyoe.com/

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>Basic Tabs - jQuery EasyUI Demo</title>		<style type="text/css">			.content{				width:100%;				margin-right:120px;				display: table;			}			.divquery{				background: blue;				display: table-cell;				vertical-align: top;			}			.qitem{				display:inline-block;				line-height:30px;				text-align:right;				width:250px;				height:25px;				overflow:hidden;				background: green;			}			.divbtn{				width:120px;				background: red;				display: table-cell;				vertical-align: top;			}		</style>	</head>	<body>		<div class="content">			<div class="divquery">				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>				<span class="qitem">					查询项目				</span>			</div>			<div class="divbtn">				查询			</div>		</div>	</body></html>

Copier après la connexion

二楼正解，display布局方式
table：指定对象作为块元素级的表格。类同于html标签

table-cell：指定对象作为表格单元格。类同于html标签
table-row：指定对象作为表格行。类同于html标签

inline-table：指定对象作为内联元素级的表格。类同于html标签

table-caption：指定对象作为表格标题。类同于html标签

http://css.doyoe.com/

谢谢！我试验了一下，其他的要求都满足了，就是有一点，在拉动浏览器边框的时候，蓝色的div会自动换行，但是换行后，旁边会空出一大段空白，怎么把这段空白去掉？

你想怎么去掉？换成红色？换成白色？

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Basic Tabs - jQuery EasyUI Demo</title>        <style type="text/css">            .content{                width:100%;                margin-right:120px;                display: table;            }            .divquery{                background: blue;                display: table-cell;                vertical-align: top;            }            .qitem{                display:block;				float:left;                line-height:30px;                text-align:right;				margin:10px 1%;                height:25px;                overflow:hidden;                background: green;            }			@media (max-width: 399px){ .qitem{width:98%;} }			@media (min-width: 400px) and (max-width: 767px){ .qitem{width:48%;} }			@media (min-width: 768px) and (max-width: 1199px){ .qitem{width:31.33%;} }			@media (min-width: 1200px){ .qitem{width:23%;} }            .divbtn{                width:120px;                background: red;                display: table-cell;                vertical-align: top;            }        </style>    </head>    <body>        <div class="content">            <div class="divquery">                <span class="qitem">                    查询项目                </span>                <span class="qitem">                    查询项目                </span>                <span class="qitem">                    查询项目                </span>                <span class="qitem">                    查询项目                </span>                <span class="qitem">                    查询项目                </span>            </div>            <div class="divbtn">                查询            </div>        </div>    </body></html>

Copier après la connexion

除了百分比还有一种用rem做的。。可以去看看。如果.qitem子级大小要固定的话，你可以根据实际情况，当子级换行时的大小，进行@media设置。。

你想怎么去掉？换成红色？换成白色？

不是换颜色，而是把这多余的一段去掉，自动换行后，会有这么一段多余的东西，这样看起来，查询按钮就和查询的项目隔的很远

你想怎么去掉？换成红色？换成白色？

不是换颜色，而是把这多余的一段去掉，自动换行后，会有这么一段多余的东西，这样看起来，查询按钮就和查询的项目隔的很远

我的意思就是问你怎么去啊，换颜色？红色部分变长？蓝色部分变短？你总该有个去掉的办法吧~

你想怎么去掉？换成红色？换成白色？

不是换颜色，而是把这多余的一段去掉，自动换行后，会有这么一段多余的东西，这样看起来，查询按钮就和查询的项目隔的很远

我的意思就是问你怎么去啊，换颜色？红色部分变长？蓝色部分变短？你总该有个去掉的办法吧~

蓝色部分变短

给你一个思路，用js或者是用响应式控制蓝色块的宽度，只要保证蓝色块的宽度始终是绿色宽度的整倍数就行。

谢谢，这是个思路，我之前也写过代码来控制，但是现在碰到的问题是，蓝色div中的项目，可能会提前就自动换行了，我的代码还没来得及控制他换行，他就自己换行了。。。。现在正苦恼呢

<!DOCTYPE html><html><head>    <title>demo</title>    <meta charset="utf-8">    <script type="text/javascript" src="http://seventh77.com/view/publicjs/jquery-2.1.4.min.js"></script>    <style type="text/css">    .blue{        width: 550px;        float: left;        background-color: blue;    }    .green{        width: 100px;        height: 50px;        margin: 1px 5px;        float: left;        background-color: green;    }    .red{        width: 150px;        height: 50px;        float: left;        background-color: red;    }    </style></head><body> <div class="blue">    <div class="green">查询项目</div>    <div class="green">查询项目</div>    <div class="green">查询项目</div>    <div class="green">查询项目</div>    <div class="green">查询项目</div></div><div class="red">查询</div><script>   window.onresize = function () {    var width = $(window).width();    if(width >1000){        $(".blue").width(550);    }    else if( width < 1000 && width >= 800){        $(".blue").width(440);    }    else if(width < 800 && width >= 600){        $(".blue").width(330);    }    else if(width < 600 && width >= 400){        $(".blue").width(220);    }    else if(width < 400 && width >= 200){        $(".blue").width(110);    }    $(".red").height($(".blue").height());  }</script>  </body></html>

Copier après la connexion

Étiquettes associées：

100分，css的布局问题，有示例代码请各位大神前来一观

source：php.cn

Article précédent：纯CSS如何实现子元素自适应宽度并居中_html/css_WEB-ITnose Article suivant：Airbnb CSS / Sass 指南_html/css_WEB-ITnose

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur