Làm thế nào để tao hai thẻ div với CSS một cố định chiều dài và một thì auto-resize theo trình duyệt? | How to create two div with CSS fixed width and auto-resize with browser?

Bài viết này sẽ hướng dẫn cách tạo hai thẻ div và dùng CSS để tạo một vùng div cố định theo chiều dài được định trước và thẻ còn lại sẽ tự động thay đổi chiều dài theo kích thước của trình duyệt web(browser web) hoặc một thẻ div nào đó chứa 2 thẻ div này.


HTML Source:
<div class="container" style="width: 100%;">
    <div class="left">
        Left div<br />
    </div>
    <div class="right">
        Right div<br />
        Right div<br />
        Right div<br />
        Right div<br />
    </div>
</div>

CSS Source:
.left {
    float: left;
    width: 250px;
    padding: 5px;
    border: 1px solid #ccc;
   
}

.right {
    width: auto;
    border: 1px solid #ccc;
    padding: 5px;
    margin-left: 261px;
    /* right margin-left = 250 + 5 +1 */
    /* if you want margin two div, you can write */
    /*  margin-left: calc(261px + 5px); */
}

Demo:




No comments:

Post a Comment