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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:51 AM

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

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>

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

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

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

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Blue Prince: How To Get To The Basement

1 months agoByDDD

Nordhold: Fusion System, Explained

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software