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

집

웹 프론트엔드

HTML 튜토리얼

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentasthuctureandenhancewebpages.1) thefinelayout, semantics 및 internactivity.2) semantictagsimproveAccessibility 및 sseo.3) appleasoftagscanoptimizeperformanceandenseRocRossercompatiber.

HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.May 01, 2025 am 12:01 AM

일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.

Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM

솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...

DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM

마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...

HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PM

HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.