คำถามติดแท็ก responsive

25
วิธีที่จะทำให้ div เติมพื้นที่แนวนอนที่เหลืออยู่?
ฉันมี 2 divs:อยู่ทางซ้ายและอีกอันอยู่ทางขวาของหน้า ด้านซ้ายมีความกว้างคงที่และฉันต้องการด้านขวาเพื่อเติมพื้นที่ที่เหลือ #search { width: 160px; height: 25px; float: left; background-color: #ffffff; } #navigation { width: 780px; float: left; background-color: #A53030; } <div id="search">Text</div> <div id="navigation">Navigation</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล
419 html  css  width  responsive 


8
ภาพพื้นหลังกว้าง 100% ที่มีความสูง "อัตโนมัติ"
ฉันกำลังทำงานกับหน้า Landing Page สำหรับมือถือของ บริษัท แห่งหนึ่ง มันเป็นเลย์เอาต์พื้นฐานจริงๆ แต่ด้านล่างส่วนหัวจะมีรูปภาพของผลิตภัณฑ์ซึ่งจะมีความกว้าง 100% เสมอ (การออกแบบจะแสดงให้เห็นว่ามันเรียงจากขอบถึงขอบเสมอ) ขึ้นอยู่กับความกว้างของหน้าจอความสูงของภาพจะปรับตามอย่างเห็นได้ชัด เดิมทีฉันทำสิ่งนี้ด้วย img (โดยมีความกว้าง CSS 100%) และใช้งานได้ดี แต่ฉันรู้ว่าฉันต้องการใช้แบบสอบถามสื่อเพื่อแสดงภาพที่แตกต่างกันตามความละเอียดที่แตกต่างกันสมมติว่ามีขนาดเล็กกลางและ ตัวอย่างเช่นภาพเดียวกันขนาดใหญ่ ฉันรู้ว่าคุณไม่สามารถเปลี่ยน img src ด้วย CSS ได้ดังนั้นฉันจึงคิดว่าฉันควรใช้พื้นหลัง CSS สำหรับรูปภาพแทนที่จะเป็นแท็ก img ใน HTML ดูเหมือนว่าจะทำงานไม่ถูกต้องเนื่องจาก div ที่มีภาพพื้นหลังต้องการทั้งความกว้างและความสูงเพื่อแสดงพื้นหลัง เห็นได้ชัดว่าฉันสามารถใช้ 'width: 100%' ได้ แต่ฉันจะใช้ความสูงอะไร ฉันสามารถใส่ความสูงคงที่แบบสุ่มเช่น 150px จากนั้นฉันจะเห็น 150px บนสุดของรูปภาพ แต่นี่ไม่ใช่วิธีแก้ปัญหาเนื่องจากไม่มีความสูงคงที่ ฉันเล่นและพบว่าเมื่อมีความสูงแล้ว (ทดสอบด้วย 150px) ฉันสามารถใช้ 'background-size: …

4
ฉันจะตอบสนองต่อความกว้างขององค์ประกอบ DOM ที่ปรับขนาดอัตโนมัติใน React ได้อย่างไร
ฉันมีหน้าเว็บที่ซับซ้อนโดยใช้ส่วนประกอบ React และกำลังพยายามแปลงหน้าจากเค้าโครงแบบคงที่เป็นเค้าโครงที่ตอบสนองและปรับขนาดได้มากขึ้น อย่างไรก็ตามฉันพบข้อ จำกัด ของ React อยู่เรื่อย ๆ และฉันสงสัยว่ามีรูปแบบมาตรฐานสำหรับจัดการปัญหาเหล่านี้หรือไม่ ในกรณีเฉพาะของฉันฉันมีส่วนประกอบที่แสดงผลเป็น div พร้อม display: table-cell และ width: auto น่าเสียดายที่ฉันไม่สามารถสืบค้นความกว้างขององค์ประกอบของฉันได้เนื่องจากคุณไม่สามารถคำนวณขนาดขององค์ประกอบได้เว้นแต่จะวางไว้ใน DOM (ซึ่งมีบริบททั้งหมดที่จะอนุมานความกว้างที่แสดงผลจริง) นอกเหนือจากการใช้สิ่งนี้สำหรับสิ่งต่างๆเช่นการวางตำแหน่งเมาส์แบบสัมพัทธ์แล้วฉันยังต้องการสิ่งนี้เพื่อตั้งค่าแอตทริบิวต์ความกว้างอย่างเหมาะสมในองค์ประกอบ SVG ภายในส่วนประกอบ นอกจากนี้เมื่อปรับขนาดหน้าต่างฉันจะสื่อสารการเปลี่ยนแปลงขนาดจากส่วนประกอบหนึ่งไปยังอีกส่วนหนึ่งในระหว่างการตั้งค่าได้อย่างไร เรากำลังทำการเรนเดอร์ SVG ของบุคคลที่สามทั้งหมดใน shouldComponentUpdate แต่คุณไม่สามารถตั้งค่าสถานะหรือคุณสมบัติของตัวคุณเองหรือส่วนประกอบย่อยอื่น ๆ ภายในวิธีการนั้นได้ มีวิธีมาตรฐานในการจัดการกับปัญหานี้โดยใช้ React หรือไม่?
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.