A piece of div css code to arrange the two divs on the page left and right. How to implement it without using float? _html/css

A piece of div css code to arrange the two divs on the page left and right. How to implement it without using float? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:08 PM

页面里有一个container, 里面有两个div

id="rightDiv">

已知container的宽是800
让leftDiv宽为200, rightDiv宽为600 横向排列起来,请问要怎么写？

如果不使用float应该怎么实现？（我的页面比这个复杂很多，用了float后ie和firefox显示差异太大，我想知道有没有什么好的技巧能够代替float，所以提了这个问题）

回复讨论(解决方案)

1，页面再复杂，各种浏览器对float解释的还是不错的。
2，不用float的话，我唯一知道的就是绝对定位了。。。一侧用绝对定位，另外一侧用margin 赋值。
3，推荐还是用float，绝对定位会越搞越麻烦。
4，float的话，左右都要float，下面用clear清除一下，就不会有问题了。ie6 下的双倍边距用_display:inline解决。firefox下的清除，可以写#container:after{overflow:hidden;display:block,content:"";height:0;line-height:0;}就可以解决了。

几点额外的建议：
1. 不要认为你把container宽度设为800,leftDiv设为200,rightDiv设为600就能拥有“实诚”的布局。
实际上，有些宽度是你很容易忽略的，比如border,padding,margin，这些都是很容易忽略的，建议把leftDiv和rightDiv按百分比设定，并且加起来小雨100%。比如：leftDiv = 24%, rightDiv = 74%。
2. 不用一味地float:left; 不要忘记还有float:right。给rightDiv设定float:right有时会有意想不到的收获。

简单地，可以这样写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb_2312" /><title>No Title</title></head><style>#container { width:800px; padding:0; margin:0 auto; height:100%;}#leftDiv { width:24%; float:left; text-align:center; line-height:600px; height:600px; display:block; background-color:#ccc; color:#f00;}#rightDiv { width:74%; float:right; text-align:center; line-height:600px; height:600px; display:block; background-color:#c00; color:#fff;}</style><body><div id="container"> 	<div id="leftDiv">	leftDiv	</div> 	<div id="rightDiv">	rightDiv	</div> </div> </body></html>

table
布局格式已经固定的话最外面直接包TABLE一行2列何必写这么多CSS搞自己头晕而且里面2个DIV是独立的以后修改也不麻烦

display:inline吧

float这里就不贴代码了，不用float的话，可以用定位来做，这种方法的优点是可以按DIV的顺序来决定优先显示的顺序，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body><style type="text/css">body {font-size:9pt;text-align:center;}#container {position:relative;margin:auto;width:800px;height:200px;}#leftDiv {position:absolute;top:0;left:0;width:200px;height:200px;background:#ddd;}#rightDiv {position:absolute;top:0;right:0;width:600px;height:200px;background:#eee;}</style>1、先显示leftDiv<div id="container"> <div id="leftDiv">leftDiv</div> <div id="rightDiv">rightDiv</div> </div>2、先显示rightDiv<div id="container"> <div id="rightDiv">rightDiv</div> <div id="leftDiv">leftDiv</div> </div></body></html>

说白了就是如果不想用float定位,那么就请使用position:absolute吧
使用时请注意在父层div中设定position:relative
然后left和right两个子层position:absolute

多说一句,子层这时候会脱离文本流,但是如果想让此div中数据能够自动撑开div,那么请在该层最下面添加一个清除浮动的元素如

float这里就不贴代码了，不用float的话，可以用定位来做，这种方法的优点是可以按DIV的顺序来决定优先显示的顺序，代码如下：
HTML codenbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
body{
font-size:9pt;
text-align:center;}
#container{
position:relative;
margin:auto;
width:800px;
height:200px;}
#leftDiv{
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background:#ddd;}
#rightDiv{
position:absolute;
top:0;
right:0;
width:600px;
height:200px;
background:#eee;}

1、先显示leftDivleftDivrightDiv

2. Display rightDiv firstrightDivleftDiv

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

What is the difference between an HTML tag and an HTML attribute?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

The Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AM

The future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.

Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

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.

See all articles