คำถามติดแท็ก css-float

การวางตำแหน่งองค์ประกอบทางซ้ายหรือขวาของคอนเทนเนอร์โดยใช้แอตทริบิวต์ CSS float

10
ฉันจะหยุดลอยซ้ายได้อย่างไร?
ฉันมีรหัสต่อไปนี้: <div style="float: left; width: 100%;"> <label style="float: left;">ABC</label> <input style="float: left; font-size: 0.5em;" type="button" onclick="addTiny(0,'Question_Text'); return false;" value="▼" title="Editor" /> <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="▲" title="Hide" /> <div class="adm"> <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor"> abc </textarea> </div> </div> ปัญหาของฉันคือ div ที่มี class …
101 css  html  css-float 

4
ทำให้เด็กมองเห็นได้ภายนอกโอเวอร์โฟลว์: ผู้ปกครองที่ซ่อนอยู่
ใน CSS overflow:hiddenมีการตั้งค่าบนคอนเทนเนอร์หลักเพื่อให้สามารถขยายได้ตามความสูงของลูกที่ลอยอยู่ แต่มันยังมีคุณสมบัติที่น่าสนใจอีกอย่างเมื่อรวมกับmargin: auto... หากพี่น้องก่อนหน้านี้เป็นองค์ประกอบลอยจริงจะปรากฏขึ้นมาเคียงข้างกัน นั่นคือถ้าพี่น้องเป็นfloat:leftคอนเทนเนอร์ด้วยfloat:none overflow:hiddenจะปรากฏทางด้านขวาของพี่น้องโดยไม่มีการขึ้นบรรทัดใหม่เหมือนกับว่ามันลอยอยู่ในโฟลว์ปกติ หากพี่น้องก่อนหน้านี้เป็นfloat:rightคอนเทนเนอร์จะปรากฏทางด้านซ้ายของพี่น้อง การปรับขนาดคอนเทนเนอร์นี้จะแสดงให้เห็นว่าอยู่กึ่งกลางระหว่างองค์ประกอบลอย บอกว่าถ้าคุณมีพี่น้องสองคนก่อนหน้านี้หนึ่งfloat:leftอื่น ๆfloat:right, ภาชนะที่จะปรากฏเป็นศูนย์กลาง inbetween สอง นี่คือปัญหา ... ฉันจะรักษาเค้าโครงประเภทนั้นได้อย่างไรโดยไม่มีการปิดบังเด็ก Googling ทั่วทั้งเว็บช่วยให้ฉันมีวิธีการclear:bothและขยายคอนเทนเนอร์ ... แต่ฉันไม่พบวิธีอื่นในการรักษาศูนย์กลางเด็กก่อนหน้าซ้าย / ขวา หากคุณสร้างคอนเทนเนอร์คอนเทนเนอร์overflow:visibleนั้นก็จะเพิกเฉยต่อการจัดวางองค์ประกอบที่ลอยอยู่และปรากฏเป็นชั้น ๆ อยู่ด้านบนขององค์ประกอบลอย ดังนั้นคำถาม : ฉันต้องมีคอนเทนเนอร์overflow:hiddenเพื่อรักษาเค้าโครง ... จะทำยังไงให้เด็ก ๆ ไม่สวมหน้ากาก ฉันจำเป็นต้องให้เด็กอยู่ในตำแหน่งที่สัมพันธ์กับผู้ปกครองนอกคอนเทนเนอร์อย่างแน่นอน หรือ ฉันจะทำอย่างไรoverflow:visibleเพื่อให้ฉันอย่างสามารถวางตำแหน่งของเด็กที่สัมพันธ์กับผู้ปกครองนอกภาชนะ ... ยังรักษาพี่น้องลอยเหมือนรูปแบบการไหล?

7
ทำให้ div ภายนอกมีความสูงเท่ากับเนื้อหาลอยโดยอัตโนมัติ
ฉันต้องการด้านนอกdivซึ่งเป็นสีดำเพื่อห่อหุ้มมันให้divลอยอยู่ภายใน ฉันไม่ต้องการที่จะใช้style='height: 200pxในdivกับouterdivรหัสตามที่ผมต้องการให้เป็นโดยอัตโนมัติสูงของเนื้อหา (เช่นลอยdivs) <div id='outerdiv' style='border: 1px solid black;background-color: black;'> <div style='width=300px;border: red 1px dashed;float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width=300px;border: red 1px dashed;float: right;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> จะบรรลุเป้าหมายนี้ได้อย่างไร?
95 css  html  css-float 

14
แบ่ง Div เป็น 2 คอลัมน์โดยใช้ CSS
ฉันพยายามแบ่ง div ออกเป็นสองคอลัมน์โดยใช้ CSS แต่ฉันยังไม่สามารถทำให้มันใช้งานได้ โครงสร้างพื้นฐานของฉันมีดังนี้: <div id="content"> <div id="left"> <div id="object1"></div> <div id="object2"></div> </div> <div id="right"> <div id="object3"></div> <div id="object4"></div> </div> </div> ถ้าฉันพยายามลอย div ด้านขวาและซ้ายไปยังตำแหน่งตามลำดับ (ขวาและซ้าย) ดูเหมือนว่าจะไม่สนใจสีพื้นหลังของ div ของเนื้อหา และรหัสอื่น ๆ ที่ฉันได้ลองจากเว็บไซต์ต่างๆดูเหมือนจะไม่สามารถแปลเป็นโครงสร้างของฉันได้ ขอบคุณสำหรับความช่วยเหลือ!
91 css  html  css-float 

6
CSS เพื่อหยุดการตัดข้อความใต้รูปภาพ
ฉันมีมาร์กอัปต่อไปนี้: <li id="CN2787"> <img class="fav_star" src="images/fav.png"> <span>Text, text and more text</span> </li> ฉันต้องการให้ถ้าข้อความห่อหุ้มมันจะไม่เข้าไปใน 'คอลัมน์' ของรูปภาพ ฉันรู้ว่าฉันสามารถทำได้ด้วยtable(ซึ่งฉันกำลังทำอยู่) แต่มันใช้ไม่ได้ด้วยเหตุผลนี้ ฉันได้ลองทำสิ่งต่อไปนี้แล้ว แต่ไม่ประสบความสำเร็จ: li span {width: 100px; margin-left: 20px} .fav_star {width: 20px} float: rightฉันยังพยายาม ขอบคุณ. แก้ไข: ฉันต้องการให้มีลักษณะดังนี้: IMG Text starts here and keeps going... and wrap starts here. ไม่เหมือน: IMG Text starts here and …

6
หยุดการตัด Divs แบบลอยตัว
ฉันต้องการมีแถวของ div (เซลล์) ที่ไม่พันกันหากเบราว์เซอร์แคบเกินไป ฉันได้ค้นหา Stack แล้ว แต่ไม่พบคำตอบที่ใช้ได้สำหรับสิ่งที่ฉันคิดว่าควรเป็นคำถาม css ธรรมดา ๆ เซลล์มีการระบุความกว้าง อย่างไรก็ตามฉันไม่ต้องการระบุความกว้างของแถวความกว้างควรเป็นความกว้างของเซลล์ลูกโดยอัตโนมัติ หากวิวพอร์ตแคบเกินไปที่จะรองรับแถว div ควรล้นด้วยแถบเลื่อน โปรดให้คำตอบของคุณเป็นข้อมูลโค้ดที่ใช้งานได้เนื่องจากฉันได้ลองใช้วิธีแก้ปัญหามากมายที่ฉันเคยเห็นจากที่อื่น (เช่นระบุความกว้าง: 100% และดูเหมือนจะไม่ได้ผล) ฉันกำลังมองหาโซลูชัน HTML / CSS เท่านั้นไม่มี JavaScript .row { float: left; border: 1px solid yellow; width: 100%; overflow: auto; } .cell { float: left; border: 1px solid red; width: 200px; height: …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.