[CSS] ช่วยแก้ไขกล่อง DIV ด้วย CSS หน่อยครับ

[xmen256k]

คือมีรูปอยู่ 1 รูปทางด้านซ้าย

และมีกล่อง DIV อยู่ทางด้านขวา

ต้องการที่จะให้ความยาวของกล่องนั้น 100%

โดยสามารถยืดหดได้ตามขนาดรูปภาพ

แต่ผลลัพธ์ที่ทำได้ คือกล่องมันจะตกไปทางด้านล่าง

และได้ทดลองแก้ โดยเพิ่มคำสั่ง float:right; ที่กล่อง DIV

ก็ยังเหมือนเดิม

ไม่ทราบว่าสามารถแก้ไขได้อย่างไรบ้างครับ

ขอบคุณครับ

[peetnawapol]

ขอดูโค้ดหน่อยครับ

[max30012540]

100% คือกว้างเท่ากรอบนอกไงครับ ต้องตกลงมาข้างล่างเป็นปกติอยู่แล้ว ถ้าไม่อยากให้ตก ก็ทำให้ทะลุกรอบนอกออกไปครับ 

[wasantec]

มันต้องแบ่ง % กันครับ ระหว่าง DIV กับ PIC รวมกันแล้วให้เท่ากับ100% แต่ควรเผื่อระยะห่างไว้ด้วยครับ

[Synchronize]

ดูตามโค้ดนี้ครับ

http://jsfiddle.net/9RD7r/

จุดสำคัญมันไม่มีอะไรมาก

รูป img ใส่ float: left

กล่อง div ใส่  overflow: hidden

เพียงเท่านี้ครับ



ปล. ตัวกล่อง div ปกติ มันก็จะกว้าง 100% อยู่แล้ว ไม่ต้อง ไปกำหนด มันครับ

[xmen256k]

ยกตัวอย่างนะครับ

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


.test-box {
    width:100%;
    border:1px solid #ff0000;
    display: table;
}
.test-right {
    border:1px solid #00ff00;
}
.test-img {
    float: left;
}



โค๊ดแบบมีปัญหา

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


<div class="test-box">
    <img class="test-img" src="http://www.thaiseoboard.com/avatarstorage/avatar_14951.png" />
    <div class="test-right">
<table width="100%" border="2">
  <tr>
<td>ข้อความในตาราง</td>
  </tr>
</table>
</div>
</div>


โค๊ดที่ใช้งานได้ปกติ

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

<div class="test-box">
    <img class="test-img" src="http://www.thaiseoboard.com/avatarstorage/avatar_14951.png" />
    <div class="test-right">
ข้อความธรรมดา
</div>
</div>



จะเห็นได้ว่าถ้าพิมพ์ข้อความปกติ มันก็จะได้ตามที่ผมต้องการครับ

แต่ว่าถ้าผมใส่พวก ตารางลงไปด้วย มันก็จะดันลงมาเป็นบรรทัดต่อไป

ไม่ทราบว่าแก้ไขยังไงได้บ้าง

ขอบคุณครับ

[peetnawapol]

ลองใส่ .test-right {float:left;} ดูครับ แล้วก็กำหนดความกว้างของตาราง กับรูปภาพ

[xmen256k]

ลองใส่ .test-right {float:left;} ดูครับ แล้วก็กำหนดความกว้างของตาราง กับรูปภาพ

ลองแล้วครับ มันก็ได้นะครับ ถ้าไม่ใส่ width แต่ถ้าใส่ width ซึ่งผมใส่เป็น 100% มันก็ไม่ได้อ่าครับ

คือมันฟิคความยาวของกรอบหลัง(แดง) ไม่ได้อ่าครับ รวมถึงกรอบเขียวด้วย

อยากให้ยืด-หด ตามความกว้างหลักของเพจอีกทีนึงครับ

[Synchronize]

ได้ลอง ดูวิธ๊ของผมรึยัง

ผมเอาตารางใส่ก็ไม่มีปัญหา นะครับ

http://jsfiddle.net/9RD7r/3/

[xmen256k]

ได้ลอง ดูวิธ๊ของผมรึยัง

ผมเอาตารางใส่ก็ไม่มีปัญหา นะครับ

http://jsfiddle.net/9RD7r/3/

เย้ ได้แล้วครับ ขอบคุณมากๆครับผม

ประเด็นมันน่าจะอยู่ที่

overflow: hidden;