3列布局渲染問題

我有一個3 col佈局，左和中col是圖像，最後一個col是文本。即使瀏覽器調整大小，我也希望始終保持所有列的高度相同。我不介意在文本的最後一列上滾動條。3列布局渲染問題

HTML：

<div class="mid-col"> 
    <img src=""/> 
    </div> 

    <div class="right-col"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Sed semper, eros nec sollicitudin porta, nibh justo consectetur elit, 
     a ultricies libero est ac justo. Nulla dictum dignissim placerat. 
     Donec non eros nisl. Morbi diam est, volutpat a orci tempus, mollis 
     maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla 
     quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra 
     velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae 
     rhoncus et, suscipit at risus. Nam dignissim sapien tortor, ut 
     egestas tortor pulvinar ut. 
    </p> 
    </div> 
</div>

CSS：

#content-container { 
    width: 100%; 
    height: 33.333%; 
} 

.left-col img { 
    width: 33.333%; 
    float: left; 
    display:block; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.mid-col img { 
    width: 33.333%; 
    float: left; 
    display:block; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.right-col { 
    width: 33.333%; 
    height: 33.333%; 
    height: 100%; 
    display:block; 
    overflow: scroll; 
}

來源

2015-06-22 Joseph Zammit

第一個'div'丟失。請編輯您的問題，並添加一個空行來修復問題格式。 –

看看這個S/O問題，它可能會幫助你：http://stackoverflow.com/questions/12322191/html-css-2-column-layout-both-columns-same-height-automatically –

可以實現通過使用display:table-[cell]

#content-container { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
#content-container > div { 
 
    display: table-cell; 
 
    width: 33%; 
 
    vertical-align: top; 
 
    border: 1px solid green 
 
} 
 
img { 
 
    width: 100%; 
 
    display: block; 
 
    height: auto; 
 
}

<div id="content-container"> 
 
    <div class="left-col"> 
 
    <img src="http://lorempixel.com/100/100" /> 
 
    </div> 
 
    <div class="mid-col"> 
 
    <img src="http://lorempixel.com/100/100" /> 
 
    </div> 
 
    <div class="right-col"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper, eros nec sollicitudin porta, nibh justo consectetur elit, a ultricies libero est ac justo. Nulla dictum dignissim placerat. Donec non eros nisl. Morbi diam est, volutpat a orci tempus, 
 
     mollis maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae rhoncus et, suscipit at risus. 
 
     Nam dignissim sapien tortor, ut egestas tortor pulvinar ut. 
 
    </p> 
 
    </div> 
 

 
</div>

來源

2015-06-22 02:54:47 dippas

謝謝你它幫助了很多答案 –

瀏覽器從頂部呈現到底部，所以你得到相反的效果。試試：

<div class="container"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
    <div class="child3"></div> 
</div> 

.container { 
    height: 100%; 
} 
.child1 { 
    width: 33.333%; 
    height: 33.333%; 
    float: left; 
    box-sizing: border-box; 
} 
.child2 { 
    width: 33.333%; 
    height: 33.333%; 
    float: left; 
    box-sizing: border-box; 
} 
.child3 { 
    width: 33.333%; 
    height: 33.333%; 
    float: left; 
    box-sizing: border-box; 
    overflow-y: auto; 
}

父容器可佔用所有空間。每個孩子都可以漂浮在左邊。更改框的大小保持百分比的一致寬度。

來源

2015-06-22 02:54:36 beautifulcoder

我喜歡@ beautifulcoder的答案，但我有我的網站的一個同樣的事情，用jQuery來處理它。

$(function() { 
    var divHeight = $(window).height()/3; 
    $('.left-col').css('height',divHeight)); 
    $('.mid-col').css('height',divHeight); 
    $('.right-col').css('height',divHeight); 
    $('.right-col').css('overflow-y','auto'); 
})

來源

2015-06-22 03:14:18 petebolduc

3列布局渲染問題

回答

相關問題