552

ฉันต้องการเค้าโครง div สองคอลัมน์ที่แต่ละอันสามารถมีความกว้างของตัวแปรเช่น

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

ขยายตัวอย่างข้อมูล

ฉันต้องการ div 'view' เพื่อขยายความกว้างทั้งหมดที่มีหลังจาก div 'tree' เติมเต็มพื้นที่ที่ต้องการ

ขณะนี้ div 'มุมมอง' ของฉันมีการปรับขนาดเนื้อหาที่มีอยู่จะดีถ้า div ทั้งคู่ใช้ความสูงทั้งหมด

ข้อจำกัดความรับผิดชอบไม่ซ้ำกัน:

ขยาย div เป็นความกว้างสูงสุดเมื่อ float: left ถูกตั้งค่า เนื่องจากมีส่วนที่เหลือมีความกว้างคงที่
ช่วยด้วย div - ทำ div ให้พอดีกับความกว้างที่เหลืออยู่ เพราะฉันต้องการสองคอลัมน์ที่จัดชิดซ้าย

html css multiple-columns

— Anurag Uniyal
แหล่งที่มา

1

ที่เกี่ยวข้องstackoverflow.com/a/22719552/759452

— Adrien จะเป็น

1

ฉันไม่เข้าใจคำถามหรือไม่เข้าใจว่าคุณเลือกคำตอบที่ยอมรับได้อย่างไรเนื่องจากมีทั้งความกว้างและความสูงได้รับการแก้ไขด้วยความไม่สะดวกoverflow hidden

— user10089632

1013

วิธีการนี้เป็นจริงได้ง่ายมาก แต่ไม่ได้ทั้งหมดที่เห็นได้ชัด คุณต้องเรียกสิ่งที่เรียกว่า "บริบทการจัดรูปแบบบล็อก" (BFC) ซึ่งโต้ตอบกับลอยในวิธีเฉพาะ

แค่เอา div ตัวที่สองเอาทุ่นออกแล้วให้overflow:hiddenแทน ค่าโอเวอร์โฟลว์ที่นอกเหนือจากที่มองเห็นได้จะทำให้บล็อกที่ตั้งไว้นั้นกลายเป็น BFC BFCs ไม่อนุญาตให้ลูกหลานลอยเพื่อหนีพวกเขาและพวกเขาไม่อนุญาตให้พี่น้อง / บรรพบุรุษลอยไปบุกรุกพวกเขา ผลกระทบสุทธินี่เป็นที่ div ลอยจะทำสิ่งที่ตนแล้ว div สองจะเป็นบล็อกธรรมดาการขึ้นความกว้างที่มีอยู่ทั้งหมดยกเว้นว่าครอบครองโดยลอย

สิ่งนี้น่าจะใช้ได้กับเบราว์เซอร์ปัจจุบันทั้งหมด แต่คุณอาจต้องเรียกใช้ hasLayout ใน IE6 และ 7

สาธิตการใช้งาน:

จับจ้องซ้าย: http://jsfiddle.net/A8zLY/5/
สิทธิ์คงที่: http://jsfiddle.net/A8zLY/2/

— Xanthir
แหล่งที่มา

28

คำตอบที่ยอดเยี่ยม! แต่คุณผิดเมื่อคุณพูดว่า "ค่าใด ๆ ที่มากเกินไปนอกเหนือจากอัตโนมัติ" จะทำให้มันเป็น BFC สิ่งที่คุณหมายถึงคือค่าใด ๆ มากเกินกว่าค่าเริ่มต้น (มองเห็นได้) จะทำให้มันเป็น BFC ในความเป็นจริงแล้วโอเวอร์โฟลอัตโนมัติก็ทำงานได้อย่างสมบูรณ์เช่นกัน - นั่นคือสิ่งที่ฉันอยากแนะนำ

— BT

52

บทความนี้มีคำอธิบายที่ดี: colinaarts.com/articles/the-magic-of-overflow-hidden

— Max Cantor

1

ถ้าเนื้อหามีขนาดใหญ่พอที่จะทำให้ div เกิน

— giannis christofakis

11

มันเป็นสิ่งสำคัญที่จะต้องทราบว่าคำสั่งของเด็ก ๆ มีความสำคัญ องค์ประกอบลอยที่มีความกว้างคงที่จะต้องอยู่เหนืออีกองค์ประกอบหนึ่ง เอาฉันนานเกินไปที่จะคิดออกทำไมมันไม่ทำงานสำหรับฉันที่มีการเปลี่ยนคำสั่ง

— Riplexus

2

ฉันเขียนคำตอบเพื่ออธิบายว่าเหตุใดการล้นเกินของทุกสิ่งจึงส่งผลให้ BFC ตามคำตอบของ David และ Boris ซึ่งสามารถพบได้ที่นี่: stackoverflow.com/questions/9943503/การตีความของฉันถูกต้องหรือไม่

— BoltClock

104

ฉันเพิ่งค้นพบความมหัศจรรย์ของกล่องเฟล็กซ์ (display: flex) ลองสิ่งนี้:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

กล่องเฟล็กซ์ให้การควบคุมที่ฉันอยากได้มานาน 15 ปี ในที่สุดมันก็มาถึงที่นี่! ข้อมูลเพิ่มเติม: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

— BT
แหล่งที่มา

ฉันไม่รู้ว่าคุณค้นพบอะไร แต่รหัสของคุณไม่ทำงานใน Chrome ล่าสุดjsfiddle.net/fjb548kw/3

— Yevgeniy Afanasyev

@YevgeniyAfanasyev ฉันลบ "float: left;" เพื่อแก้ไขปัญหา ขอบคุณสำหรับข้อความ!

— BT

ขอบคุณ. คุณช่วยอธิบายหน่อยได้ไหมว่าทำไมคุณถึงมีflex-grow: 100;แทนflex-grow: 1;?

— Yevgeniy Afanasyev

2

@YevgeniyAfanasyev ไม่มีเหตุผลพิเศษยกเว้นว่าฉันชอบทำมัน มันช่วยให้ฉันคิดเป็นร้อยละดังนั้นถ้าฉันสามารถทำบางสิ่งบางอย่างเช่นตั้งค่า #a เป็นflex-grow:10และจากนั้นฉันจะตั้งflex-grow: 90#b เพื่อ# # จะเป็น 10% ของความกว้างของบรรทัดและ #b จะ 90% ของความกว้างของบรรทัด หากไม่มีองค์ประกอบอื่นใดที่มีสไตล์ความกว้างแบบยืดหยุ่นแสดงว่ามันไม่สำคัญว่าคุณจะใส่อะไรไว้ในทางเทคนิค

— BT

สิ่งนี้ทำงานได้ดีที่สุดสำหรับฉันพยายามวางอินพุตและปุ่มแบบเรียงต่อกันราวกับว่าเป็นแบบเดียวกัน

— Souleste

28

โซลูชัน Flexbox

นี่คือสิ่งที่flex-growทรัพย์สินมีไว้สำหรับ

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

ขยายตัวอย่างข้อมูล

หมายเหตุ:เพิ่มคำนำหน้าของผู้ขายดิ้นถ้าจำเป็นโดยคุณเบราว์เซอร์ที่สนับสนุน

— Reggie Pinkham
แหล่งที่มา

27

นี่จะเป็นตัวอย่างที่ดีของบางสิ่งที่ไม่สำคัญกับตารางและฮาร์ด (ถ้าไม่เป็นไปไม่ได้อย่างน้อยก็ข้ามเบราว์เซอร์) สำหรับ CSS

หากทั้งสองคอลัมน์มีความกว้างคงที่นี่จะเป็นเรื่องง่าย

หากหนึ่งในคอลัมน์มีความกว้างคงที่นี่จะยากขึ้นเล็กน้อย แต่สามารถทำได้โดยสิ้นเชิง

ด้วยความกว้างของตัวแปรทั้งสองคอลัมน์ IMHO คุณจำเป็นต้องใช้ตารางสองคอลัมน์

— cletus
แหล่งที่มา

11

ตารางจะไม่ดีมากในการออกแบบที่ตอบสนองซึ่งคุณต้องการให้คอลัมน์ด้านขวาเลื่อนไปทางซ้ายบนอุปกรณ์ขนาดเล็ก

— เอส

1

มีเทคนิคการออกแบบที่ตอบสนองต่อการทำงานกับตาราง: css-tricks.com/responsive-data-tables

— Rikki

ตอนนี้ฉันมักจะออกแบบเลย์เอาต์สองแบบแยกกันอย่างสมบูรณ์และเปลี่ยนแปลงบนมือถือโดยใช้คำสั่งสื่อและdisplay:none;ในขณะที่การตอบสนองมากที่สุดเท่าที่เป็นไปได้ 100% ในระดับสไลเดอร์บางครั้งมันก็ดีกว่าที่จะเปลี่ยนการออกแบบของคุณ และสไตล์ปุ่ม

— Bysander

22

ลองดูทางออกนี้

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— angel.dimitrov
แหล่งที่มา

2

นี่เป็นวิธีการแก้ปัญหาที่ดีกว่าเพราะไม่ต้องการการซ่อนไว้มากเกินไป

— Joseph Lennox

3

ต่อ OP: "ฉันต้องการเค้าโครง div สองคอลัมน์ที่แต่ละอันสามารถมีความกว้างของตัวแปรได้" ในคำตอบของคุณคุณต้องทราบความกว้างของคอลัมน์แรกดังนั้นจึงไม่ใช่ตัวแปร คุณอาจตั้งค่าความกว้างคงที่ในทั้งสองคอลัมน์และเพียงลอย

— จาค็อบอัลวาเรซ

17

การใช้calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

ขยายตัวอย่างข้อมูล

ปัญหานี้คือความกว้างทั้งหมดจะต้องกำหนดอย่างชัดเจนไม่ว่าจะเป็นค่า (px และ em ทำงานได้ดี) หรือเป็นเปอร์เซ็นต์ของสิ่งที่กำหนดไว้อย่างชัดเจน

— โจเอลโมเสส
แหล่งที่มา

15

นี่อาจช่วย ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

ขยายตัวอย่างข้อมูล

— a6hi5h3k
แหล่งที่มา

+1 เพราะตัวอย่างของคุณดูเหมือนจะทำงานได้ แต่ในสถานการณ์จริงของฉันมีเนื้อหาจาก 'ดู' คืบคลานเข้าสู่ 'ต้นไม้' div เนื่องจาก tree div ไม่ได้ 100% อาจมีจาวาสคริปต์บางส่วนบังคับให้มีขนาดเล็กและหลังจากความสูงของต้นไม้ ฉันดูเนื้อหา

— Anurag Uniyal

ในกรณีนั้นถ้าคุณทราบความกว้างสูงสุดของคอลัมน์ด้านซ้ายคุณสามารถกำหนดสไตล์ความกว้างสูงสุด (ไม่ทำงานใน IE) หรือคิดถึงขอบซ้าย (ระวังข้อผิดพลาดที่ขอบสองครั้งบน IE) หรือ padding ซ้าย

— a6hi5h3k

มันเยี่ยมมาก! ฉันใช้มันในบรรทัดเป็นโซลูชันแบบครั้งเดียว:<div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>

— ajwest

5

ฉันไม่เข้าใจว่าเพราะเหตุใดผู้คนจึงตั้งใจทำงานอย่างหนักเพื่อค้นหาโซลูชัน CSS แบบบริสุทธิ์สำหรับเลย์เอาต์แบบเรียงง่ายที่ใช้TABLEแท็กเก่า

เบราว์เซอร์ทั้งหมดยังมีลอจิกเลย์เอาต์ของตาราง ... เรียกฉันว่าไดโนเสาร์ แต่ฉันขอให้มันช่วยคุณ

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

ขยายตัวอย่างข้อมูล

เสี่ยงน้อยกว่าในแง่ของความเข้ากันได้ข้ามเบราว์เซอร์

— ปัทม
แหล่งที่มา

2

ใช่ แต่ถ้าทุกอย่างถูกทำโดย css ทำไมไม่เป็นอย่างน้อยอยากรู้อยากเห็นถ้ามันเป็นไปได้?

— Anurag Uniyal

2

นั่นเป็นเพราะหากคุณต้องการmedia-queriesใส่ทั้งสองคอลัมน์หนึ่งไว้เหนืออีกคอลัมน์หนึ่งในอุปกรณ์ขนาดเล็กมันเป็นไปไม่ได้กับtableแท็กเก่า เพื่อให้ได้ผลคุณต้องใช้CSSสไตล์ตาราง ดังนั้นสำหรับทุกวันนี้มันจะดีกว่าCSSถ้าคุณต้องการเลย์เอาต์ที่ตอบสนองต่อขนาดหน้าจอใด ๆ

— ElChiniNet

5

หากความกว้างของคอลัมน์อื่น ๆ ที่ได้รับการแก้ไขวิธีการเกี่ยวกับการใช้calcฟังก์ชั่น CSS ที่ทำงานให้กับเบราว์เซอร์ทั่วไปทั้งหมด :

width: calc(100% - 20px) /* 20px being the first column's width */

วิธีนี้จะคำนวณความกว้างของแถวที่สอง (เช่นความกว้างที่เหลือ) และนำไปใช้อย่างรับผิดชอบ

— anit
แหล่งที่มา

นี่คือคำตอบที่ดีที่สุดเท่าที่จะใช้สิ่งอื่นมากกว่า flexbox css-gridเช่นตัวอย่างเช่น ยังทำงานร่วมกับposition: fixedซึ่งทำให้ทุกอย่างรอบตัวเลือกที่สมบูรณ์แบบ! ขอบคุณ!

— Bartekus

3

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

ขยายตัวอย่างข้อมูล

— A.Pramod Kumar
แหล่งที่มา

ฉันต้องการบางสิ่งเช่นแถบสถานะที่มีรายการคงที่ทางด้านซ้ายรายการคงที่ทางด้านขวาและบรรทัดข้อความหนึ่งบรรทัดที่ใช้พื้นที่ด้านซ้ายทั้งหมด ฉันเริ่มต้นด้วยคำตอบนี้และเพิ่ม div ข้อความหลังจากลอยด้วย: height: 20px; พื้นที่สีขาว: nowrap; ล้น: ซ่อนอยู่; text-overflow: clip

— englebart

3

คุณสามารถลองCSS ตารางเค้าโครง

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

ขยายตัวอย่างข้อมูล

— ศีล
แหล่งที่มา

2

flex-Grow - สิ่งนี้นิยามความสามารถของไอเท็ม flex ในการเติบโตหากจำเป็น ยอมรับค่าหน่วยที่ทำหน้าที่เป็นสัดส่วน มันกำหนดจำนวนพื้นที่ว่างที่มีอยู่ภายใน flex container ที่ไอเท็มควรกิน

หากรายการทั้งหมดตั้งค่าการขยายแบบยืดหยุ่นเป็น 1 พื้นที่ที่เหลือในคอนเทนเนอร์จะถูกแจกจ่ายให้กับเด็กทุกคนอย่างเท่าเทียมกัน หากเด็กคนใดคนหนึ่งมีค่าเป็น 2 พื้นที่ที่เหลือจะใช้พื้นที่มากเป็นสองเท่าของที่อื่น ๆ (หรืออย่างน้อยก็จะพยายาม) ดูเพิ่มเติมที่นี่

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Stanislav Ostapenko
แหล่งที่มา

1

การใช้งานที่แตกต่างกันเล็กน้อย

แผงสอง div (เนื้อหา + พิเศษ), เคียงข้างกันcontent panelขยายหากextra panelไม่มี

jsfiddle: http://jsfiddle.net/qLTMf/1722/

— ราว
แหล่งที่มา

1

แพท - คุณพูดถูก นั่นเป็นเหตุผลที่วิธีการแก้ปัญหานี้จะตอบสนองทั้ง "ไดโนเสาร์" และโคตร :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

ขยายตัวอย่างข้อมูล

— johnmanoahs
แหล่งที่มา

2

ไม่มีการอ้างอิง html สำหรับ css class .ip และไม่ทำงานใน IE7

— Keith K

1

คุณสามารถใช้ไลบรารี CSS ของ W3 ที่มีคลาสที่เรียกrestว่าทำเช่นนั้น:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

ขยายตัวอย่างข้อมูล

อย่าลืมลิงค์ห้องสมุด CSS ในหน้าheader:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

นี่คือตัวอย่างอย่างเป็นทางการ: W3 School Tryit Editor

— manar
แหล่งที่มา

ดูเหมือนว่าเพิ่งเพิ่ม "ล้น: ซ่อนเร้น" ซึ่งทำให้คำตอบรุ่นที่แย่กว่านั้นได้รับแล้ว

— vpzomtrrfrt

0

ฉันไม่แน่ใจว่านี่เป็นคำตอบที่คุณคาดหวัง แต่ทำไมคุณไม่ตั้งค่าความกว้างของต้นไม้เป็น 'อัตโนมัติ' และความกว้างของ 'ดู' เป็น 100%

3

เพราะนั่นจะทำให้การลอยครั้งที่สองอยู่ต่ำกว่าอันแรกเพราะมันกว้างเกินไป

— cletus

0

ดูที่โครงร่าง CSS โครงร่างที่มีอยู่ ฉันอยากจะแนะนำSimplหรือกรอบงานพิมพ์เขียวที่ซับซ้อนกว่าเล็กน้อย

หากคุณกำลังใช้ Simpl (ซึ่งเกี่ยวข้องกับการนำเข้าไฟล์simpl.cssเพียงไฟล์เดียว) คุณสามารถทำได้ดังนี้:

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

สำหรับเค้าโครง 50-50 หรือ:

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

สำหรับ 25-75 อัน

มันง่ายมาก

ทั้งสองคอลัมน์จะมีความกว้างแปรผันหรือไม่

— Anurag Uniyal

0

ขอบคุณสำหรับปลั๊กอิน Simpl.css!

อย่าลืมหุ้มคอลัมน์ทั้งหมดของคุณColumnWrapperด้วย

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

ฉันกำลังจะออกเวอร์ชัน 1.0 ของ Simpl.css ดังนั้นช่วยกระจายคำ!

— มีขนดก
แหล่งที่มา

0

ฉันเขียนฟังก์ชันจาวาสคริปต์ที่ฉันเรียกจาก jQuery $ (เอกสาร) .ready () สิ่งนี้จะแยกวิเคราะห์ลูกทั้งหมดของ div parent และอัพเดตเฉพาะ child ที่ถูกที่สุดเท่านั้น

HTML

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

จาวาสคริปต์

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

— bcr666
แหล่งที่มา

0

นี่เป็นเรื่องง่ายโดยใช้เฟล็กบ็อกซ์ ดูตัวอย่างด้านล่าง ฉันได้เพิ่มคอนเทนเนอร์ wrapper เพื่อควบคุมโฟลว์และตั้งค่าส่วนสูงทั่วโลก เพิ่มขอบเขตแล้วเช่นกันเพื่อระบุองค์ประกอบ โปรดสังเกตว่า div ในขณะนี้ขยายให้เต็มความสูงเช่นกันตามที่ต้องการ คำนำหน้าผู้ขายควรใช้สำหรับ flexbox ในสถานการณ์จริงเนื่องจากยังไม่ได้รับการสนับสนุนอย่างสมบูรณ์

ฉันได้พัฒนาเครื่องมือฟรีเพื่อทำความเข้าใจและออกแบบเค้าโครงโดยใช้ flexbox ตรวจสอบที่นี่: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

ขยายตัวอย่างข้อมูล

— มาริโอวาเกซ
แหล่งที่มา

คุณอ่านคำตอบก่อนหน้านี้ทั้งหมดก่อนที่จะเพิ่มของคุณ? ดูเหมือนจะไม่ ...

— Temani Afif

เป็นหมายเหตุด้านข้างคุณไม่จำเป็นต้องเพิ่มstretchเพราะเป็นค่าเริ่มต้นและไม่จำเป็นต้องสร้างองค์ประกอบย่อยของคอนเทนเนอร์เด็กดังนั้นจึงdisplay:flexไม่มีประโยชน์สำหรับองค์ประกอบภายใน

— Temani Afif

ฉันสงสัยว่าทำไม downvote โดยไม่มีความคิดเห็นใด ๆ นี่ไม่ใช่คำตอบที่ตอบคำถามใช่ไหม ทำไม? หากพยายามช่วยเหลือผู้อื่นถูกลงโทษฉันจะคิดสองครั้งก่อนคำตอบของฉันต่อไป

— Mario Vázquez

1

คุณมีสองความคิดเห็นหลังจาก downvote มันยังไม่พอ?

— Temani Afif

Temari คุณลองใช้เครื่องมือของฉันหรือไม่? คุณไม่คิดว่ามีประโยชน์และสามารถช่วยเหลือผู้อื่นได้ใช่ไหม คุณคิดว่าไม่เกี่ยวข้องกับคำถามหรือไม่ คุณตอบคำถามนี้ที่ไหน ฉันไม่เห็นมัน หน้าที่ของคุณคืออะไร

— Mario Vázquez

-3

หากความกว้างทั้งสองเป็นความยาวผันแปรทำไมคุณไม่คำนวณความกว้างด้วยการเขียนสคริปต์หรือฝั่งเซิร์ฟเวอร์

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

— amischiefr
แหล่งที่มา

3

เซิร์ฟเวอร์ทราบได้อย่างไรว่าเอ็นจิ้นเลย์เอาต์ของลูกค้าจะทำงานอย่างไร

— Kev

ง่าย: พัฒนาให้ 90% ของเบราว์เซอร์ออกมา :) IE 7+, FF3 + และ Safari รองรับ CSS 3 คุณสามารถรวมองค์ประกอบมาตรฐาน IE6 <! - [ถ้า lte IE 6]> เบราว์เซอร์ใดที่ไม่รองรับ style = "width:%" ??

— amischiefr

ผมไม่ทราบว่ามันสามารถทำได้ด้านเซิร์ฟเวอร์ แต่ใช่จาวาสคริปต์ไว้บางคนอาจทำมัน แต่ฉันต้องการที่จะหลีกเลี่ยงมันจนกว่า CSS / html ไม่สามารถทำมัน

— อนุรักษ์ Uniyal

ซึ่งมันไม่สามารถ ดังนั้นหากคุณต้องการให้ทั้งคู่เป็นแบบไดนามิกคุณต้องทำทั้งในด้านสคริปต์หรือเซิร์ฟเวอร์

— amischiefr

ขยาย div เพื่อเติมความกว้างที่เหลือ

โซลูชัน Flexbox