有2列，希望右侧固定宽度，左侧自动宽度。_html/css

Home

Web Front-end

HTML Tutorial

有2列，希望右侧固定宽度，左侧自动宽度。_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:48 AM

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

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

回复讨论(解决方案)

<!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控制比较好。

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

How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone?Apr 30, 2025 pm 03:12 PM

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

How to optimize collision handling of third-person roaming in a room using Three.js and Octree?Apr 30, 2025 pm 03:09 PM

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

What problems will you encounter when using native select on your phone?Apr 30, 2025 pm 03:06 PM

Issues with native select on mobile phones When developing applications on mobile devices, we often encounter scenarios where users need to make choices. Although native sel...

Why can some websites achieve mouse scrolling and penetration effect, while others cannot?Apr 30, 2025 pm 03:03 PM

Exploring the implementation principle of mouse scrolling events When browsing some websites, you may notice that some page elements still allow scrolling the entire page when the mouse is hovering...

See all articles