Hướng dẫn trình bày poster phim và thông tin bằng HTML và CSS. | How to align 3 divs (left/left/left) inside another div?

Bài viết này tôi sẽ hướng dẫn cách sử HTML và CSS để thiết kế mẫu bảng quảng cáo thông tin phim theo bố cục 3 divs(left/left/left), bao gồm 1 div chứa hình ảnh(image), 1 div cứ tiêu đề thông tin như hãng sản xuất, tác giả,... và một div chứa thông số, mô tả của các tiêu đều. Để hiểu rõ hơn bạn xem mẫu ví vụ bên dưới.

Ví dụ - Example:

Mã nguồn - Source code:

<div id="container">
    <div style="float: left;"></div>
    <div style="float: left; font-weight: bold; margin: 5px;"></div>
    <div style="float: left; margin: 5px;"></div>
</div>
<div style="clear: both;"></div>

Mã ví dụ - Source Demo:

<div id="container">
    <div style="float: left;">
        <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6oTvUL0F9IfpA5UHabMEcYQpTUInJAzrx5VQGwZ7oHL7Mc86pSRLeAWS_peyrG-LZD1Kfn6C73X24hHRnmMyj4IyWqC3EYbrvRrZ473jGl-cWSWbbMdbjrKBKkWA8AGfUTcb_sA7pbE/s1600/Partly_Cloudy_poster.jpg" imageanchor="0" style="clear: left; float: left; margin-bottom: 0em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6oTvUL0F9IfpA5UHabMEcYQpTUInJAzrx5VQGwZ7oHL7Mc86pSRLeAWS_peyrG-LZD1Kfn6C73X24hHRnmMyj4IyWqC3EYbrvRrZ473jGl-cWSWbbMdbjrKBKkWA8AGfUTcb_sA7pbE/s1600/Partly_Cloudy_poster.jpg" height="320" width="213" /></a>
    </div>
    <div style="float: left; font-weight: bold; margin: 5px;">
        Directed by
        Produced by
        Written by
        Starring

        Music by
        Production
        Company
        Distributed by

        Release dates
        Running time
        Country
        Language    
    </div>
    <div style="float: left; margin: 5px;">
        Peter Sohn
        Kevin Reher
        Pete Sohn
        Tony Fucile (voice)
        Lori Richardson (voice)
        Michael Giacchino
        Pixar Animation Studios
        Walt Disney Pictures
        Walt Disney Studios
        Motion Pictures
        May 29, 2009 (with Up)
        5:45[1]
        United States
        English   
    </div>
</div>
<div style="clear: both;"></div>

Kết quả - Result:

Directed by
Produced by
Written by
Starring

Music by
Production
Company
Distributed by

Release dates
Running time
Country
Language

Peter Sohn
Kevin Reher
Pete Sohn
Tony Fucile (voice)
Lori Richardson (voice)
Michael Giacchino
Pixar Animation Studios
Walt Disney Pictures
Walt Disney Studios
Motion Pictures
May 29, 2009 (with Up)
5:45[1]
United States
English