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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

二楼正解，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>

Nach dem Login kopieren

二楼正解，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>

Nach dem Login kopieren

除了百分比还有一种用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>

Nach dem Login kopieren

Verwandte Etiketten：

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

Quelle：php.cn

Vorheriger Artikel：纯CSS如何实现子元素自适应宽度并居中_html/css_WEB-ITnose Nächster Artikel：Airbnb CSS / Sass 指南_html/css_WEB-ITnose

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors