ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => หัวข้อเริ่มโดย: narupot ใน 14 สิงหาคม 2014, 16:53:56

ชื่อเรื่อง: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: narupot ใน 14 สิงหาคม 2014, 16:53:56
จะจัดให้ภาพที่เรียงกัน เรียงไปด้านขวายังไงอ่ะ
(http://www.uppic.org/image-C473_53EC86C3.jpg) (http://www.uppic.org/share-C473_53EC86C3.html)

เขียน css ไม่ค่อยเก่ง :wanwan011:
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: sys2528 ใน 14 สิงหาคม 2014, 16:58:21
อ้างถึง<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>

ลองดูครับ
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: narupot ใน 14 สิงหาคม 2014, 17:16:13
อ้างถึงจาก: sys2528 ใน 14 สิงหาคม 2014, 16:58:21
อ้างถึง<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
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: sensepondza ใน 14 สิงหาคม 2014, 18:36:32
display:inline-block อีกทางเลือกนึงครับ
แบบนี้ไม่ต้อง clear float
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: narupot ใน 14 สิงหาคม 2014, 20:39:56
อ้างถึงจาก: sensepondza ใน 14 สิงหาคม 2014, 18:36:32
display:inline-block อีกทางเลือกนึงครับ
แบบนี้ไม่ต้อง clear float

จะลองดูนะครับ
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: narupot ใน 14 สิงหาคม 2014, 21:37:58
อ้างถึงจาก: sensepondza ใน 14 สิงหาคม 2014, 18:36:32
display:inline-block อีกทางเลือกนึงครับ
แบบนี้ไม่ต้อง clear float

ใช้ได้ๆ +1 :wanwan003:
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: narupot ใน 14 สิงหาคม 2014, 22:09:26
อยากทำแบบนี้
(http://www.uppic.org/image-6A10_53ECD0DB.jpg) (http://www.uppic.org/share-6A10_53ECD0DB.html)

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

(http://www.uppic.org/image-5950_53ECD0DB.jpg) (http://www.uppic.org/share-5950_53ECD0DB.html)
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: scanfire ใน 14 สิงหาคม 2014, 22:21:29
แบ่งเป็น 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{
}
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: killer777 ใน 14 สิงหาคม 2014, 22:54:08
แบบด้านล่างน่าจะช่วยได้ครับ

<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>
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: max30012540 ใน 14 สิงหาคม 2014, 22:56:21
หา Grid system หรือ CSS Framework มาใช้ จะทำให้ชีวิตคุณง่ายขึ้นมากครับ
http://getbootstrap.com/css/#grid
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: sensepondza ใน 14 สิงหาคม 2014, 23:10:49
อ้างถึงจาก: max30012540 ใน 14 สิงหาคม 2014, 22:56:21
หา Grid system หรือ CSS Framework มาใช้ จะทำให้ชีวิตคุณง่ายขึ้นมากครับ
http://getbootstrap.com/css/#grid
เชียร์โพสนี้ครับ หัดเล่นดูครับ
:wanwan013: :wanwan013:
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: narupot ใน 14 สิงหาคม 2014, 23:40:22
อ้างถึงจาก: scanfire ใน 14 สิงหาคม 2014, 22:21:29
แบ่งเป็น 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 ประกอบเลยหราพี่ คิดภาพไม่ค่อยออก  :wanwan023:
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: scanfire ใน 15 สิงหาคม 2014, 00:33:54
http://cssdeck.com/labs/0jfskdad
ชื่อเรื่อง: Re: เทพ css ช่วยจัดหน่อยครับ +1
โพสต์โดย: narupot ใน 15 สิงหาคม 2014, 07:21:09
อ้างถึงจาก: scanfire ใน 15 สิงหาคม 2014, 00:33:54
http://cssdeck.com/labs/0jfskdad
thank +1