有2列，希望右侧固定宽度，左侧自动宽度。_html/css_WEB-ITnose
css
#main {
margin-right:220px;
}
#side {
float:right;
width:200px;
}
使用上面的css可以达到2列的效果，但是右侧的div会在main的下方。
有什么办法可以让它与main并排吗？
main main main main main main main main main main main main main main main main main main main main main main main main
回复讨论(解决方案)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>#main { margin-right:220px;}#side { position:absolute; width:200px; right:0; top:0;}.container { position:relative;}</style></head><body><div class="container"> <div id="main"> main main main main main main main main main main main main main main main main main main main main main main main main </div> <div id="side">SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE</div> </div></body></html> 谢谢，这样是可以的。
还是想问一下为什么float:right无法达到这个效果。有什么需要注意的地方？
把side放在main前面，css保持不变，结果就显示正确。
不明白原因。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>#main { margin-right:220px;}#side { float:right; width:200px;}</style></head><body><div class="container"> <div id="side">SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE</div> <div id="main"> main main main main main main main main main main main main main main main main main main main main main main main main </div> </div></body></html>应该是文本流的问题, 先后读的div有不同布局
无论怎样，代码解析总归是自上而下的
当遇到块属性元素的时候，由于块属性元素本身独占一排，无论怎样的情况下。
那么就要讲下，什么是浮动？
可以这么定义，浮动可以使元素脱离文档流，按照指定的方向移动，直到相邻浮动元素或者父级边界停了下来
1.块元素放在上边，浮动放在下边 由于自上而下解析，遇到块元素独占一排，和父级同宽，接下来遇到浮动元素，那么应该在块元素下边 发生位移，直到右边父级边界
2.块元素放下边，浮动放上边 先遇到浮动，那么脱离文档流，发生位移直至右边父级边界，那么接下来的div为块，如果你不清除浮动，肯定要挤上来的，因此会在一排显示
我不止一次的在强调，在做页面布局时，一定注意，怎么才能规范的去布局，怎么才是正常一种思路，而不是说 我试了这个布局，加了某条样式，达到了我想要的结果，然后会引发其他的问题
如果想要让两个块元素在同行内显示，请都加上浮动
也许很多人会做如下处理，左边的块浮动，右边的div不设置浮动，靠后边元素挤上来实现类似的效果，很多人可能考虑写这样的代码
<style>.left{width:100px;height:100px;background:red;float:left;}.right{width:100px;height:100px;background:green;margin-left:100px;}</style></head><body> <div class="left"></div> <div class="right"></div></body>标准浏览器下，不会有什么问题，然而在IE6下两个块元素之间会有3px的间隙bug，而此问题是没法修复的，除非统一浮动
虽然你的代码和上面的有一定的区别，但是我还是习惯归为一类，而此类问题的解决 就是统一浮动
这个……还是用js控制比较好。
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
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
