อยากให้ตำแหน่งของปุ่ม Readmore อยู่ด้านล่างซ้ายสุด เขียน css ยังไงหรอครับ

[fogza]

นี่คือส่วนที่เป็นปุ่ม readmore

โค้ด เลือก ขยาย

.gn_static-link a {
background: url(../images/gn_static-link.png) 0 0 no-repeat;
padding: 6px 19px 8px 10px;
display: inline-block;
color: white;
}

       .gn_static-link a:hover {background: url(../images/gn_static-link-hover.png) 0 0 no-repeat; text-decoration: none;}

ตามต้นฉบับที่ให้มา เค้าจะเอาไปแทรกในบทความเลย คือ

โค้ด เลือก ขยาย

<span class="gn_static-link"><a href="#">Read more</a></span></div>


ตามรูปข้างบนนะครับ มันดูไม่เป็นระเบียบเอาซะเลย ผมอยากให้ปุ่ม Readmore มันอยู่ด้านล่างซ้ายสุดขอบ โดยที่ไม่สนใจว่าในตำแหน่งนั้นจะมีข้อมูลมาก หรือน้อยนะครับ กำหนดยังไง
ผมลองใช้
position:relative; right: 100%; top: 100%;
มันก็ไม่ได้ครับ มันล้นไปล้นมา

ช่วยแนะนำด้วยครับ ว่าต้องเขียนยังไงให้มันอยู่ด้านล่างซ้ายสุด โดยที่ไม่สนความยาวของข้อมูล
ขอบคุณมากครับ

[legendaross]

float:left

น่าจะได้นะ

[fogza]

ไม่ได้ครับ มันล้นออก - -"

[rawat2543]

เอาเว็บมาให้ดูเลยดีกว่า

[fogza]

เอาเว็บมาให้ดูเลยดีกว่า

ตอนนี้ผมทำในเครื่องอยู่ครับ ยังไม่ได้อัพขึ้นโฮส กะว่าทำเสร็จค่อย import sql เอานะครับเดี๋ยวผมบอกรายละเอียดให้แล้วกันครับ

นี่คือในบทความ ที่ดึง css มาใช้งานครับ

โค้ด เลือก ขยาย

<div class="wrapper wrapper-services">
<div class="col-3">
<h3>Healthy Families</h3>
Lorem ipsum dolor sit amet, con- sectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul>
<li><a href="#">Build confidence in their abilities</a></li>
<li><a href="#">Positive friendships experience</a></li>
</ul>
<span class="gn_static-link"><a href="#">Read more</a></span></div>

<div class="col-3">
<h3>Building Strong Relationships</h3>
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul>
<li><a href="#">Learn effective communication skills</a></li>
<li><a href="#">Acquire the vocabulary to express feelings and emotions</a></li>
</ul>
<span class="gn_static-link"><a href="#">Read more</a></span></div>

<div class="col-3_1">
<h3>Healing From Trauma</h3>
Dolor sit amet, consectetur adipisicing elit, sed do alarm eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul>
<ul>
<li><a href="#">Recognize they are not responsible for the abuse they have suffered</a></li>
<li><a href="#">See that they are now safe</a></li>
</ul>
</ul>
<br /><span class="gn_static-link"><a href="#">Read more</a></span></div>
</div>

ส่วนนี่คือ css ที่เอามาใช้ครับ
wrapper-service

โค้ด เลือก ขยาย

.wrapper-services {padding-left: 11px;}
.wrapper-services h3 {
color: #7BD4E4;
display: block;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 26px;
line-height: 25px;
min-height: 55px;
text-transform: uppercase;
padding: 7px 0 0 0;
}
.wrapper-services ul {
margin: 12px 0 8px;
padding: 0!important;
}
.wrapper-services ul li {
padding: 0 0 13px 20px;
background: url(../images/wrapper-services-li.png) 0 3px no-repeat;
}
.wrapper-services ul li a {
color: #fe701a; /** #9654ab; **/
line-height: 15px !important;
}
.wrapper-services ul li a:hover {background: #ebebeb; color: #ff6000;}

ขนาด

โค้ด เลือก ขยาย

.col-3 {width: 218px; hieght: 230px; overflow: hidden; margin-right: 12px;}
.col-3_1 {width: 218px; hieght: 230px; overflow: hidden;}

ปุ่ม readmore

โค้ด เลือก ขยาย

.gn_static-link a {
background: url(../images/gn_static-link.png) 0 0 no-repeat;
padding: 4px 17px 6px 10px;
display: inline-block;
float: bottom;
color: white;
}
.gn_static-link a:hover {background: url(../images/gn_static-link-hover.png) 0 0 no-repeat; text-decoration: none;}

                .gn_static-link {padding-top: 25px !important;}
รบกวนด้วยนะครับ ตอนนี้ได้แต่ใส่ <br /> แก้ขัดไปก่อน 

[yoot]

ดูลิ้งค์นี้เป็นแนวทางครับ http://www.cssnewbie.com/example/equal-heights/

อย่างแรกต้องทำให้เป็น Equal Height Columns ก่อนนะครับ ผมลองทำดูแล้วเป็นแบบนี้นะครับ ลองเอาไปปรับใช้ดู

โค้ดในเว็บตัวอย่าง แต่ให้เพิ่ม position: relative; ตรงคลาส.column

   #wrap {
      width: 600px;
      margin: 0 auto; }
   .column {
      float: left;
      padding: 10px;
      position: relative; }
   #col1 {
      width: 110px;
      margin-right: 10px;
      background-color: #E2DDC4; }
   #col2 {
      width: 200px;
      margin-right: 10px;
      background-color: #6B99F6; }
   #col3 {
      width: 210px;
      background-color: #E87C5E; }

เพิ่มคลาสสำหรับ readmore

   .readmore {
      position: absolute; bottom: 0; }

แทรกโค้ด readmore ลงใน html

<div id="wrap">
   <h1>Equal Height Columns with jQuery</h1>
   <div class="column" id="col1">
      <p>This three-column design features three columns with significantly varying quantities of content.</p>
      <span class="readmore"><a href="#">Read more</a></span>
   </div>
   <div class="column" id="col2">
      <p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p>
      <p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
      <span class="readmore"><a href="#">Read more</a></span>
   </div>
   <div class="column" id="col3">
      <p>And I think a single class is an addition we can all get behind.</p>
      <span class="readmore"><a href="#">Read more</a></span>
   </div>
</div>

พอจะเข้าใจมั้ยครับ

[fogza]

ขอบคุณครับ เดี๋ยวจะลองไปทำดูครับ
ตอนนี้เจอปัญหาอยู่ดีๆ slide มันไม่ทำงาน เฮ้อ.... 
จะอัพขึ้นโฮสอยู่แล้วเชียว ติดนู้นติดนี่อยู่ได้

[magicsanta]

ขอลองบ้าง