.col1 {width:33.33%; background:#000;} .col2 {width:33.33%; } .col2 img {width:100%;} .col3 {width:33.33%; background:#fff;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>score</title> <style> .flex-container{ display: flex; flex-flow: row wrap; } .flex-container div{ flex: 1; } </style> </head> <body> <div class="flex-container"> <div style="background-color:red;"> fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs </div> <div style="background-color:green;"> fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br>fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br>fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br>fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br> </div> <div style="background-color:blue;"> fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex</title> <style> .flex-container{ display: flex; flex-flow: row wrap; } .flex-container div{ display: flex; flex: 1; } .flex-container div div{ justify-content: center; align-self: center; } </style> </head> <body> <div class="flex-container"> <div style="background-color:red;"> <div> fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs </div> </div> <div style="background-color:green;"> fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br>fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br>fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br>fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br> </div> <div style="background-color:blue;"> fdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgsfdgsdfgs<br> </div> </div> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง