목차
第一种想到的办法:
第二种想到的办法
웹 프론트엔드 HTML 튜토리얼 css实现多列并排 多块并排 左右顶头_html/css_WEB-ITnose

css实现多列并排 多块并排 左右顶头_html/css_WEB-ITnose

Jun 21, 2016 am 09:03 AM

今天在工作中遇到了一个问题:有三个div块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。
我第一时间想到的是传统的三列布局,但传统的三列布局都是固定宽度加自适应宽度,从网上搜了好久都没有搜到结果。所以自己想办法。

第一种想到的办法:

第一种我准备用两边float,中间margin居中的方法。代码如下:
css:

    .wrap{height:300px;width:95%;margin: 100px auto;}    .left{float:left;width:32%;height:100px;background-color: #235255}    .right{float:right;width:32%;height:100px;background-color: #374737}    .middle{width:32%;margin:0 auto;height:100px;background-color: #563958}
로그인 후 복사

html:

    <div class="wrap">        <div class="left"></div>        <div class="middle"></div>        <div class="right"></div>    </div>
로그인 후 복사

结果变成了这样:

查了一下,解决办法是把right提到最前面。试了一下,成功了。

 html:    <div class="wrap">        <div class="right"></div>        <div class="left"></div>        <div class="middle"></div>             </div>    
로그인 후 복사

不过思考一下,这个问题有很多的不方便。首先就是可能会打乱html的加载顺序,还有就是间距是不固定的,并且加了float,可能会有副作用。
之后我就考虑第二种方案。问了下同事,提到了可以用inline-block代替float的方法。这给了我很大的启发。回来我就试了一下。

第二种想到的办法

这种方法将这三个块都设置成display:inline-block,利用inline元素的特性将其居于一行,再将其box-sizing属性设置成border-box。
这种方法,好处有几点:
1.不会有float的副作用存在
2.不管是三列还是三十列,来就行
代码如下:
css:

    .g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}    .in-bl{display: inline-block;}    .f{width: 33.333%;height: 100px;background-color: #ab1256;}    .s{width: 33.333%;height: 100px;}    .t{width: 33.333%;height: 100px;background-color:#192873;}
로그인 후 복사

html:

    <div class="g-bd">    <div class="f in-bl">            </div>    <div class="s in-bl">    </div>    <div class="t in-bl">    </div>    </div>
로그인 후 복사

结果与预想的不太相同。预想中他们之间没有空隙,充满容器,不会换行。结果他们义无反顾地换行了,之间有了一个本不该存在的空隙。
原因也很简单,作为一个带有inline的元素之间换行是会被识别为空格的(哭)。
原理找到了,这里有详细的解释,鑫旭大神就是厉害:张鑫旭对于inline-block的理解。这里是个demo,就用最简单的方法去除空格就好了。
接下来还有个问题:无法通过margin/padding来给他们之间设置间隔。这里想了一个办法:在每个盒子里面嵌套一个盒子,背景设置给里面的,宽度设置比100%小一点,通过margin:auto进行调整位置,这样就有一个可以调整的间隙了~
代码如下:
css:

.g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}.in-bl{display: inline-block;}.f{width: 33.333%;height: 100px;background-color: #ab1256;}.s{width: 33.333%;height: 100px;}.t{width: 33.333%;height: 100px;background-color:#192873;}.in{margin:0 auto;px;width: 95%;background-color:#958727;height: 100%}
로그인 후 복사

html:

   <div class="g-bd"><div class="f in-bl">    </div><div class="s in-bl"><!--这里把结束标签与下一个标签合并了,正式工作时会给后端工程师添麻烦,不建议使用-->    <div class="in">            </div></div><div class="t in-bl">    </div></div>
로그인 후 복사

效果:

大功告成。这样的方法会增加一个嵌套,要设置border-box,也算是有些副作用了。到工作时再根据需要进行取舍吧。

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

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? Mar 18, 2025 pm 02:51 PM

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소? html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소? Mar 12, 2025 pm 04:08 PM

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소?

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?

See all articles