html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
ul.topnav {
\t list-style-type: none;
\t /*position: fixed; */
\t overflow: hidden;
\t margin: 0;
\t padding: 0 0 0 400px;
\t background-color: #110E0C;
/*width: 100%;
top: 0; */
}
ul.topnav li {
\t float: left;
}
ul.topnav li a {
\t display: block;
\t color: white;
\t text-align: center;
\t text-decoration: none;
\t padding: 14px 30px;
\t text-transform: uppercase;
\t /*background-color: #3F4345;*/
}
ul.topnav li a:hover {
\t background-color: #C8D0D7;
\t color: #D8610C;
\t border-bottom: 1px solid #D8610C;
}
ul.topnav li a.active {
\t background-color: #C8D0D7;
\t color: #D8610C;
\t border-bottom: 1px solid #D8610C;
}
header {
\t width: 100%;
\t padding: 2px;
\t color:black;
\t background-color: #C8D0D7;
\t text-align: center;
\t overflow: hidden;
}
header img {
\t
\t height: 150px;
\t width: 150px;
\t margin-left: 900px;
\t float:left;
\t
}
header p {
\t padding: 40px;
}
section {
\t background-color: #333333;
\t height: 500px;
}
section img {
\t border: 1px solid white;
\t height: 400px;
\t width: 500px;
}
section h3 {
\t color: white;
}
section p {
\t color: white;
\t height: 170px;
\t width: 600px;
\t padding: 0;
\t margin: 0;
\t line-height: 20px;
\t vertical-align: top;
}
.main-topic {
\t border: 2px solid green;
\t width: 1541px;
\t margin: 0 auto;
\t clear: both;
}
.left-text{
\t vertical-align:middle;
float:left;
}
.right-picture{
}
.right-picture > img{
\t display: block;
}
.clear{
\t clear: both;
}
\t <section>
\t \t <div class="main-topic">
\t \t \t <div class="left-text">
\t \t \t \t <h3>Deadpool Fans Petition 'SNL' for Superhero to Host</h3>
\t \t \t \t <p>
\t \t \t \t \t Deadpool fans want its superhero to host Saturday Night Live — Deadpool, that is, not Ryan Reynolds. Fans of the Merc With a Mouth, who led the Marvel film to a history-making debut at the box office, have launched a Change.org petition calling for the antihero to host an upcoming episode of the NBC sketch comedy show. "We've all seen the trailers, the magazine covers, the viral videos, and the billboards by now, so what's left for Deadpool (Ryan Reynolds) to do?" creator Andrew Stege asks in the petition, which is directed to SNL, creator Lorne Michaels, parent.
\t \t \t \t </p>
\t \t \t </div>
\t \t \t <div class="right-picture">
\t \t \t \t <img src="http://cdn3.whatculture.com/wp-content/uploads/2015/10/f5S3dvUb.jpg">
\t \t \t </div>
\t \t \t <div class="clear"></div>
\t \t <div>
\t </section>
Xin chào ketan, tiếc là màn hình flex có le Hỗ trợ trình duyệt ss. –
cảm ơn nhưng có không gian giữa hình ảnh và đường viền div. Tôi muốn văn bản và hình ảnh được bao quanh trực tiếp bởi biên giới –
@LevanTsivadze đó là vì bạn có nhiều chiều rộng trong div cha và bạn đã đưa chiều rộng cố định cho hình ảnh. Có cần thiết không. 'width: 1541px;' thành '.main topic ' – ketan