ฉันมีบางอย่างเช่นนั้น:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
การลอยตัวทั้งสองเป็นสิ่งจำเป็น ฉันต้องการให้ div เนื้อหาเต็มหน้าจอทั้งหมดลบ 100px สำหรับเมนู ถ้าฉันไม่ใช้ float div จะขยายเท่าที่ควร แต่ฉันจะตั้งค่านี้ได้อย่างไรเมื่อตั้งค่าลูกลอย ถ้าฉันใช้ sth เช่น
style=width:100%จากนั้น div เนื้อหาจะได้ขนาดของพาเรนต์ซึ่งก็คือ body หรือ div อื่นที่ฉันลองด้วยและแน่นอนว่ามันไม่พอดีกับเมนูจากนั้นจะแสดงด้านล่าง
คำตอบ:
หวังว่าฉันจะเข้าใจคุณถูกต้องลองดูที่นี่: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>วิธีที่เข้ากันได้มากที่สุดที่ฉันพบในการทำเช่นนี้ไม่ชัดเจนนัก คุณต้องลบลอยออกจากคอลัมน์ที่สองและนำoverflow:hiddenไปใช้กับมัน แม้ว่าสิ่งนี้ดูเหมือนจะซ่อนเนื้อหาใด ๆ ที่อยู่นอก div แต่ก็บังคับให้ div อยู่ในระดับบนสุด
การใช้รหัสของคุณนี่คือตัวอย่างของวิธีการ:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>หวังว่านี่จะเป็นประโยชน์สำหรับทุกคนที่มีปัญหานี้สิ่งที่ฉันพบว่าทำงานได้ดีที่สุดสำหรับไซต์ที่ฉันสร้างหลังจากพยายามปรับให้เข้ากับความละเอียดอื่น ๆ น่าเสียดายที่วิธีนี้ใช้ไม่ได้หากคุณใส่โฟลตด้านขวาdivหลังเนื้อหาด้วยเช่นกันหากใครรู้วิธีที่ดีในการทำให้มันใช้งานได้ด้วยความเข้ากันได้ของ IE ที่ดีฉันยินดีเป็นอย่างยิ่งที่จะรับฟัง
display: flex;ตอนนี้โมเดล Flexbox ถูกนำไปใช้อย่างกว้างขวางแล้วฉันขอแนะนำให้ใช้แทนเนื่องจากช่วยให้มีความเป็นไปได้มากขึ้นflexกับเค้าโครง นี่คือสองคอลัมน์ง่ายๆเหมือนต้นฉบับ:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>และนี่คือคอลัมน์สามคอลัมน์ที่มีคอลัมน์กลางความกว้างที่ยืดหยุ่นได้!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>.content .right{
overflow: auto;
background-color: red;
}+1 สำหรับ Merkuro แต่ถ้าขนาดของลูกลอยเปลี่ยนระยะขอบคงที่ของคุณจะล้มเหลว หากคุณใช้ CSS ด้านบนทางด้านขวาdivมันจะเปลี่ยนขนาดได้ดีโดยเปลี่ยนขนาดที่ลอยด้านซ้าย มันค่อนข้างยืดหยุ่นมากขึ้นเช่นนั้น ตรวจสอบซอที่นี่: http://jsfiddle.net/9ZHBK/144/
overflow: hiddenและoverflow autoส่งผลให้เกิดพฤติกรรมเดียวกัน ฉันยังคิดว่าผู้คนชื่นชมซอ
องค์ประกอบที่ลอยจะถูกนำออกจากเค้าโครงโฟลว์ปกติและองค์ประกอบบล็อกเช่น DIV จะไม่ขยายความกว้างของพาเรนต์อีกต่อไป กฎเปลี่ยนไปในสถานการณ์นี้ แทนที่จะสร้างวงล้อใหม่ลองดูไซต์นี้เพื่อดูวิธีแก้ปัญหาที่เป็นไปได้ในการสร้างเค้าโครงสองคอลัมน์ที่คุณต้องการ: http://www.maxdesign.com.au/presentation/page_layouts/
โดยเฉพาะอย่างยิ่ง "รูปแบบของเหลว 2 คอลัมน์"
ไชโย!
นี่คือโซลูชันที่อัปเดตสำหรับ HTML 5 หากใครสนใจและไม่ชอบ "ลอย"
ตารางใช้งานได้ดีในกรณีนี้เนื่องจากคุณสามารถตั้งค่าความกว้างคงที่ให้กับตารางและเซลล์ตารางได้
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}http://jsfiddle.net/EAEKc/596/ ซอร์สโค้ดต้นฉบับจาก @merkuro
การใช้งานนี้อาจช่วยแก้ปัญหาของคุณได้
width: calc(100% - 100px);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>และขึ้นอยู่กับmerkuroวิธีแก้ปัญหาหากคุณต้องการขยายทางด้านซ้ายคุณควรใช้:
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>ยังไม่ได้รับการทดสอบบน IE ดังนั้นอาจดูไม่ดีใน IE
คำตอบที่ยอมรับอาจใช้ได้ แต่ฉันไม่ชอบแนวคิดเรื่องระยะขอบที่ทับซ้อนกัน ใน HTML5 คุณจะทำสิ่งนี้ด้วยdisplay: flex;ไฟล์. มันเป็นวิธีการแก้ปัญหาที่สะอาด เพียงกำหนดความกว้างสำหรับองค์ประกอบหนึ่งและflex-grow: 1;สำหรับองค์ประกอบแบบไดนามิก เวอร์ชั่นแก้ไขของ fiddle merkuros: https://jsfiddle.net/EAEKc/1499/
สวัสดีมีวิธีง่ายๆด้วยวิธีซ่อนล้นในองค์ประกอบด้านขวา
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html> สิ่งนี้อาจใช้ได้:
div{
display:inline-block;
width:100%;
float:left;
}