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

ฉันต้องการจัดให้ 3 divs อยู่ภายใน container div อย่างนี้: [[LEFT] [CENTER] [RIGHT]] div คอนเทนเนอร์กว้าง 100% (ไม่มีความกว้างที่ตั้งไว้) และ div center ควรอยู่ในกึ่งกลางหลังจากปรับขนาดคอนเทนเนอร์ ดังนั้นฉันจึงตั้ง: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} แต่มันจะกลายเป็น: [[LEFT] [CENTER] ] [RIGHT] เคล็ดลับใด ๆ

392 html  css  flexbox  alignment  css-float 

ฉันใช้เลขหน้าและมันจะต้องเป็นศูนย์กลาง ปัญหาคือการเชื่อมโยงจะต้องแสดงเป็นบล็อกจึงต้องลอย แต่text-align: center;ไม่สามารถใช้งานได้ ฉันสามารถทำได้โดยการให้ส่วนหุ้มของ divpper ของด้านซ้าย แต่ทุกหน้าจะมีจำนวนหน้าที่แตกต่างกันดังนั้นมันจะไม่ทำงาน นี่คือรหัสของฉัน: .pagination { text-align: center; } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(/images/structure/pagination-button.png); } .pagination a.last { width: 90px; background: url(/images/structure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(/images/structure/pagination-button-first.png); } <div class='pagination'> <a class='first' …

354 css-float  center  css 

กฎ CSS ต่อไปนี้ทำอะไร: .clear { clear: both; } และทำไมเราต้องใช้มัน?

293 css  css-float 

คำถามของฉัน เป็นวิธีการใดที่ต้องการโดยนักออกแบบเว็บไซต์มืออาชีพ? มีวิธีการใด ๆ เหล่านี้ที่สร้างขึ้นโดยเว็บเบราว์เซอร์เมื่อวาดเว็บไซต์หรือไม่ นี่เป็นเพียงการตั้งค่าส่วนตัวทั้งหมดหรือไม่ มีเทคนิคอื่นที่ฉันขาดหายไปไหม หมายเหตุ: คำถามข้างต้นเกี่ยวข้องกับการออกแบบเค้าโครงหลายคอลัมน์ ลอย: ด้านซ้าย; http://jsfiddle.net/CDe6a/ นี่เป็นวิธีที่ฉันใช้เสมอเมื่อสร้างเค้าโครงคอลัมน์และดูเหมือนว่าจะใช้ได้ดี แม้ว่าผู้ปกครองจะล่มสลายในตัวเองดังนั้นคุณเพียงแค่ต้องจำไว้ในclear:both;ภายหลัง อีกนักโทษที่ฉันเพิ่งพบคือไม่สามารถที่จะจัดข้อความชิดในแนวตั้ง แสดง: อินไลน์; ดูเหมือนว่าจะแก้ไขปัญหาการยุบตัวของแม่ แต่เพิ่มช่องว่าง http://jsfiddle.net/CDe6a/1/ การลบช่องว่างออกจาก html ดูเหมือนจะเป็นการแก้ไขปัญหาที่ง่ายที่สุด แต่ไม่ต้องการถ้าคุณจู้จี้จุกจิกเกี่ยวกับ html ของคุณ http://jsfiddle.net/CDe6a/2/ แสดง: อินไลน์บล็อก ดูเหมือนว่าจะมีพฤติกรรมเหมือนdisplay:inline;กัน http://jsfiddle.net/CDe6a/3/ แสดง: ตารางเซลล์ http://jsfiddle.net/CDe6a/4/ ทำงานได้สมบูรณ์แบบ ความคิดของฉัน: ฉันแน่ใจว่าฉันทำสิ่งต่าง ๆ ขาดหายไปเช่นข้อยกเว้นบางอย่างที่จะทำลายเค้าโครง แต่display:table-cell;ดูเหมือนว่าจะทำงานได้ดีที่สุดและฉันคิดว่าฉันจะเริ่มแทนที่float:left;เมื่อฉันดูเหมือนจะสับสนอยู่clear:both;เสมอ ฉันได้อ่านบทความและบล็อกจำนวนมากเกี่ยวกับเรื่องนี้ในเว็บ แต่ไม่มีใครตอบคำถามที่ชัดเจนเกี่ยวกับสิ่งที่ฉันควรใช้เมื่อจัดวางเว็บไซต์ของฉัน

281 html  css  css-float 

สมมติว่าคุณมีdiv, ให้มันชัดเจนwidthและใส่องค์ประกอบในนั้นในกรณีของฉันimgอีกdivอัน แนวคิดคือเนื้อหาของคอนเทนเนอร์divจะทำให้คอนเทนเนอร์divยืดออกและเป็นพื้นหลังสำหรับเนื้อหา แต่เมื่อผมทำเช่นนี้ที่มีการdivหดตัวเพื่อให้พอดีกับไม่ใช่วัตถุลอยและวัตถุลอยจะเป็นได้ทั้งทุกอย่างออกหรือครึ่งหนึ่งออกในช่วงครึ่งปีและไม่ต้องแบกใด ๆ divกับขนาดของขนาดใหญ่ที่ ทำไมนี้ มีบางอย่างที่ฉันขาดไปและฉันจะเอาไอเท็มที่ลอยอยู่ออกเพื่อยืดส่วนheightที่บรรจุได้divอย่างไร

274 css  html  css-float 

ฉันรู้วิธีที่จะทำให้ 2 divs ลอยข้างกันเพียงแค่ลอยหนึ่งไปทางซ้ายและอื่น ๆ ไปทางขวา แต่จะทำอย่างไรกับ 3 divs หรือฉันควรใช้ตารางเพื่อจุดประสงค์นี้

270 css  css-float 

ฉันต้องการมีสองรายการในบรรทัดเดียวกันใช้float: leftสำหรับรายการทางด้านซ้าย ฉันไม่มีปัญหาในการบรรลุเป้าหมายนี้เพียงอย่างเดียว ปัญหาคือผมต้องการทั้งสองรายการที่จะเข้าพักในบรรทัดเดียวกันแม้เมื่อคุณปรับขนาดเบราว์เซอร์ขนาดเล็กมาก คุณรู้ไหมว่ามันเป็นอย่างไรกับตาราง เป้าหมายคือการป้องกันไม่ให้สินค้าถูกห่อไว้ไม่ว่าอะไรจะเกิดขึ้น วิธีการที่ผมบอกเบราว์เซอร์ใช้ CSS ที่ผมค่อนข้างจะยืดที่มีdivกว่าห่อมันเพื่อที่float: right;div เป็นดังต่อไปนี้float: left; div? สิ่งที่ฉันต้องการ: \ +---------------+ +------------------------/ | float: left; | | float: right; \ | | | / | | |content stretching \ Screen Edge | | |the div off the screen / <--- +---------------+ +------------------------\ /

216 css  css-float  css-tables  stretching 

ฉันต้องการถามว่าความสูงและลอยทำงานอย่างไร ฉันมี div ภายนอกและ div ภายในที่มีเนื้อหาอยู่ ความสูงของมันอาจแตกต่างกันไปขึ้นอยู่กับเนื้อหาของ div ภายใน แต่ดูเหมือนว่า div ภายในของฉันจะล้น div ภายนอก อะไรจะเป็นวิธีที่เหมาะสมที่จะทำ? <html> <body> <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange"> <div style="width:500px; height:200px; background-color:black; float:right"></div> </div> </body> </html> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

210 html  css  css-float 

ตัวอย่างเช่นฉันมีคลาส. บทความและฉันต้องการดูคลาสนี้เป็นมุมมองตาราง ดังนั้นฉันจึงใช้สไตล์นี้: .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } ลักษณะนั้นจะทำให้. article ดูเป็นกระเบื้อง / ตาราง ทำงานได้ดีกับความสูงคงที่ แต่ถ้าฉันต้องการตั้งค่าความสูงเป็นอัตโนมัติ (ยืดโดยอัตโนมัติตามข้อมูลที่อยู่ในนั้น) เส้นตารางจะดูน่ารังเกียจ และฉันต้องการให้มุมมองเป็นแบบนี้:

129 css  grid  positioning  css-float  tiles 

โดยปกติเมื่อเราต้องการมีหลายDIVsตัวติดต่อกันเราจะใช้float: leftแต่ตอนนี้ฉันค้นพบเคล็ดลับของdisplay:inline-block ตัวอย่างเช่นการเชื่อมโยงที่นี่ สำหรับฉันแล้วนั่นdisplay:inline-blockเป็นวิธีที่ดีกว่าalign DIVsในการติดต่อกัน แต่มีข้อบกพร่องหรือไม่? เหตุใดแนวทางนี้จึงเป็นที่นิยมน้อยกว่าfloatเคล็ดลับ?

127 css  css-float  html 

ฉันต้องการ div จะเสมอที่ด้านขวาของ div float:rightแม่ของมันดังนั้นฉันใช้ มันได้ผล. แต่ฉันยังต้องการให้มันไม่ส่งผลกระทบต่อเนื้อหาอื่น ๆ เมื่อแทรกดังนั้นฉันจึงใช้position:absolute. ตอนนี้ใช้float:rightไม่ได้ div ของฉันจะอยู่ทางซ้ายของ div หลักเสมอ ฉันจะย้ายไปทางขวาได้อย่างไร?

126 css  css-float  position 

ฉันจะทำให้ Div เพิ่มความสูงได้อย่างไรเมื่อมันลอยอยู่ข้างใน ฉันรู้ว่าการกำหนดค่าสำหรับความกว้างและการตั้งค่าส่วนเกินให้กับงานที่ซ่อนอยู่ ปัญหาคือฉันต้องการ div ที่มองเห็นได้มากเกินไป ความคิดใด ๆ ?

121 css  html  overflow  css-float 

ฉันต้องการให้คอนเทนเนอร์ div ของฉันได้รับความสูงสูงสุดของความสูงของเด็ก โดยไม่รู้ว่าเด็กdivจะมีความสูงเท่าใด ผมพยายามออกในJSFiddle ภาชนะdivเป็นสีแดง ซึ่งไม่ปรากฏขึ้น ทำไม?

116 css  css-float  liquid-layout 

เป็นไปได้หรือไม่ที่จะซ้อน DIV หลายรายการเช่น: <div> <div></div> <div></div> <div></div> <div></div> </div> เพื่อให้ DIV ภายในทั้งหมดมีตำแหน่ง X และ Y เท่ากัน? โดยค่าเริ่มต้นพวกเขาทั้งหมดจะอยู่ด้านล่างซึ่งกันและกันโดยเพิ่มตำแหน่ง Y ตามความสูงของ DIV ก่อนหน้าล่าสุด ฉันรู้สึกว่าลอยหรือโชว์หรือกลเม็ดอื่น ๆ อาจกัดได้? แก้ไข: DIV หลักมีตำแหน่งที่สัมพันธ์กันดังนั้นการใช้ตำแหน่งสัมบูรณ์ดูเหมือนจะไม่ได้ผล

116 css  html  stack  css-float 

ฉันกำลังพยายามเพิ่มความกว้างให้กับ a divแต่ดูเหมือนว่าฉันจะประสบปัญหาเพราะไม่มีเนื้อหา นี่คือ CSS และ HTML ที่ฉันมีจนถึงตอนนี้ แต่ใช้งานไม่ได้: CSS body{ margin:0 auto; width:1000px } ul{ width:800px; } ul li{ clear:both; } .test1{ width:200px; float:left; } HTML <body> <div id="test"> <ul> <li> <div class="test1">width1</div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> …

110 html  css  width  css-float