Sử dụng div như table

Để sử dụng div như table, ta phải có tr, và td. tr ta có thể chọn display: table, td ta chọn display: table-cell

<div class="detail-photo">
    <div class="left-nav"><a href="#"><img src="images/left-photo-detail.png" alt="left-photo-detail.png" /></a></div>
    <div class="photo"><a href="#"><img src="images/photo.jpg" alt="photo.jpg" /></a></div>
    <div class="right-nav"><a href="#"><img src="images/right-photo-detail.png" alt="right-photo-detail.png" /></a></div>
</div>


 

.detail-photo {
	float: left;
	.calwidth(5);
	display: table;
        table-layout: fixed; /* fix bug in firefox */
	.left-nav {
		width: 15px;
		text-align: right;
		display:table-cell;
		vertical-align:middle;
                float: none;
	}
	.photo {
		width: 500px;
		display:table-cell;
		vertical-align:middle;
		text-align:center;
                float: none;
	}
	.right-nav {
		width: 15px;
		display:table-cell;
		vertical-align:middle;
		text-align: left;
                float: none;
	}
}

Kết quả trả về:

Bonus: vertical align with bootstrap2

<div class="row-fluid stories">
    <div class="span1">
        <a href="#"><img src="/images/arrow-left.jpg" alt="arrow-left.jpg" /></a>
    </div>
    <div class="span10">
        <div>
            <div class="row-fluid">
                <div class="span6 photo">
                    <img src="/images/stories-before-after.jpg" alt="stories-before-after.jpg" />
                </div>
                <div class="span6 text">
                    <h3><a href="#">Edward de carle</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, consequuntur, expedita eligendi nulla distinctio sit cum consectetur similique maxime pariatur qui atque reprehenderit vitae libero facilis illum inventore natus quae?</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, consequuntur, expedita eligendi nulla distinctio sit cum consectetur similique maxime pariatur qui atque reprehenderit vitae libero facilis illum inventore natus quae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, consequuntur, expedita eligendi nulla distinctio sit cum consectetur similique maxime pariatur qui atque reprehenderit vitae libero facilis illum inventore natus quae?</p>
                </div>
            </div>
        </div>
    </div>
    <div class="span1">
        <a href="#"><img src="/images/arrow-right.jpg" alt="arrow-left.jpg" /></a>
    </div>
</div>


 

.stories {
    &>div {
        float: none;
        display:table-cell;
        vertical-align:middle;
    }
    .photo {
        border-right: $border;
    }
    .text {
        width: 48%;
        &>h3 a {
            text-transform: uppercase;
        }
    }
    &> .span10 > div {
        border-right: $border;
        border-left: $border;
    }
}

Kết quả trả về:

1_zpsb095aaab.png

Bonus: Sử dụng flex-box: Nếu viết code như sau, thì left sẽ 26px, right sẽ dãn, và cuối cùng center sẽ dãn, sau khi right và left được xác định:

<div class="row menu">
    <div class="col-xs-12">
        <div class="bar-setting">
        </div>
        <div class="bar-items">
        </div>
        <div class="bar-arrow right icon-right-open-big"></div>
    </div>
</div>
.menu {
    .col-xs-12 {
        display:-moz-box; /* Firefox */
        display:-webkit-box; /* Safari and Chrome */
        display:-ms-flexbox; /* Internet Explorer 10 */
        display:box;
        float: none;
        .bar-setting {
            width: 26px;
        }
        .bar-items {
            -moz-box-flex:1.0; /* Firefox */
            -webkit-box-flex:1.0; /* Safari and Chrome */
            -ms-flex:1.0; /* Internet Explorer 10 */
            box-flex:1.0;
        }
    }
}

Kết quả có thể xem như sau:

Vậy ta có thể kết luận như sau: Nếu biết width của right và left thì ta dùng display:table, còn không biết width và muốn dãn ở giữa thì ta dùng flex

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s