เทพ css ช่วยจัดหน่อยครับ +1

[narupot]

จะจัดให้ภาพที่เรียงกัน เรียงไปด้านขวายังไงอ่ะ


เขียน css ไม่ค่อยเก่ง

[sys2528]

<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>

ลองดูครับ

[narupot]

<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>
<div style="float:left;">รูปภาพและข้อความ</div>

ลองดูครับ

ได้ละครับ thank +1

[sensepondza]

display:inline-block อีกทางเลือกนึงครับ
แบบนี้ไม่ต้อง clear float

[narupot]

display:inline-block อีกทางเลือกนึงครับ
แบบนี้ไม่ต้อง clear float

จะลองดูนะครับ

[narupot]

display:inline-block อีกทางเลือกนึงครับ
แบบนี้ไม่ต้อง clear float

ใช้ได้ๆ +1

[narupot]

อยากทำแบบนี้


แต่ของผมดันเป็นแบบนี้

[scanfire]

แบ่งเป็น 3 คอลัมน์ นะครับผม

///บล็อกใหญ่ 3 อัน
.box{
    width: 33%;
    display: block;
    float: left;
}

////ไอ บล๊อก 4 อัน
.list-box{
    list-style: none; margin: 0; padding: 0;
}

.list-box li{
    width: 49%;
    float: left;
    margin-bottom: 15px;
}


.list-text{
}

[killer777]

แบบด้านล่างน่าจะช่วยได้ครับ

<div>
  <div style="float: left;">Content for New Div Tag Goes Here</div>
  <div style="float: right;">     
      <div>Content for New Div Tag Goes Here</div>
      <div>Content for New Div Tag Goes Here</div>
      <div>Content for New Div Tag Goes Here</div>
      <div>Content for New Div Tag Goes Here</div>
  </div>
</div>

[max30012540]

หา Grid system หรือ CSS Framework มาใช้ จะทำให้ชีวิตคุณง่ายขึ้นมากครับ
http://getbootstrap.com/css/#grid

[sensepondza]

หา Grid system หรือ CSS Framework มาใช้ จะทำให้ชีวิตคุณง่ายขึ้นมากครับ
http://getbootstrap.com/css/#grid

เชียร์โพสนี้ครับ หัดเล่นดูครับ

[narupot]

แบ่งเป็น 3 คอลัมน์ นะครับผม

///บล็อกใหญ่ 3 อัน
.box{
    width: 33%;
    display: block;
    float: left;
}

////ไอ บล๊อก 4 อัน
.list-box{
    list-style: none; margin: 0; padding: 0;
}

.list-box li{
    width: 49%;
    float: left;
    margin-bottom: 15px;
}


.list-text{
}

เหมือนจะเข้าใจแต่ก็งง
ไม่มี html ประกอบเลยหราพี่ คิดภาพไม่ค่อยออก 

[scanfire]

http://cssdeck.com/labs/0jfskdad

[narupot]

http://cssdeck.com/labs/0jfskdad

thank +1