CSS สอง divs ติดกัน

ฉันต้องการที่จะให้ทั้งสอง<div>อยู่ติดกัน ด้านขวา<div>ประมาณ 200px; และด้านซ้าย<div>จะต้องเติมส่วนที่เหลือของความกว้างของหน้าจอ? ฉันจะทำสิ่งนี้ได้อย่างไร

คุณสามารถใช้flexboxเพื่อจัดวางรายการของคุณ:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

นี่เป็นเพียงการขูดพื้นผิวของเฟล็กบ็อกซ์ Flexbox สามารถทำสิ่งมหัศจรรย์ได้

สำหรับการสนับสนุนเบราว์เซอร์รุ่นเก่าคุณสามารถใช้ CSS floatและคุณสมบัติความกว้างเพื่อแก้ไข

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

ฉันไม่รู้ว่านี่เป็นปัญหาปัจจุบันหรือไม่ แต่ฉันเพิ่งพบปัญหาเดียวกันและใช้display: inline-block;แท็กCSS การห่อสิ่งเหล่านี้ใน div เพื่อให้สามารถจัดวางได้อย่างเหมาะสม

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

โปรดทราบว่าการใช้แอททริบิวต์สไตล์แบบอินไลน์ใช้เพื่อรวบรัดตัวอย่างเท่านั้นซึ่งแน่นอนว่าสิ่งเหล่านี้ถูกย้ายไปใช้ไฟล์ CSS ภายนอก

น่าเสียดายที่นี่ไม่ใช่สิ่งที่น่ารำคาญสำหรับการแก้ปัญหาทั่วไป สิ่งที่ง่ายที่สุดคือการเพิ่มคุณสมบัติ CSS "ลอย: ใช่" ถึง 200px div ของคุณสิ่งนี้จะทำให้ "main" ของคุณ - ความกว้างเต็มและข้อความใด ๆ ในนั้นจะลอยไปรอบ ๆ ขอบของ 200px-div ซึ่งมักจะดูแปลก ๆ ขึ้นอยู่กับเนื้อหา (ค่อนข้างมาก ในทุกกรณียกเว้นถ้าเป็นภาพลอย)

แก้ไข: ตามคำแนะนำของ Dom ปัญหาการห่อแน่นอนสามารถแก้ไขได้ด้วยระยะขอบ ฉันโง่

วิธีที่แนะนำโดย @roe และ @MohitNanda ทำงาน แต่ถ้า div ที่ถูกตั้งค่าเป็นfloat:right;มันต้องมาก่อนใน HTML source สิ่งนี้จะทำลายลำดับการอ่านจากซ้ายไปขวาซึ่งอาจสร้างความสับสนหากหน้านั้นถูกแสดงโดยปิดสไตล์ หากเป็นกรณีนี้อาจเป็นการดีกว่าถ้าใช้ div wrapper และการกำหนดตำแหน่งแบบสัมบูรณ์:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

แสดงให้เห็นถึง:

แก้ไข:อืมน่าสนใจ หน้าต่างแสดงตัวอย่างแสดง div ที่จัดรูปแบบอย่างถูกต้อง แต่รายการโพสต์ที่แสดงผลไม่ได้ ขออภัยคุณต้องลองด้วยตัวเอง

ฉันพบปัญหานี้ในวันนี้ จากการแก้ปัญหาข้างต้นสิ่งนี้ได้ผลกับฉัน:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

เพียงแค่ทำให้ div div ขยายความกว้างเต็มและลอย divs ที่อยู่ภายใน

UPDATE

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

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

และสิ่งที่คุณได้มาที่นี่คือตู้เก็บของที่มีขนาดรวม 4 ยูนิตซึ่งแบ่งพื้นที่กับเด็ก ๆ ในความสัมพันธ์ 1/4 และ 3/4

ฉันได้ทำตัวอย่างใน CodePen เพื่อแก้ปัญหาของคุณแล้ว ฉันหวังว่ามันจะช่วย

http://codepen.io/timbergus/pen/aOoQLR?editors=110

เก่ามาก

บางทีนี่อาจเป็นแค่เรื่องไร้สาระ แต่คุณลองกับโต๊ะบ้างไหม? มันไม่ได้ใช้ CSS โดยตรงสำหรับการวางตำแหน่ง divs แต่ใช้งานได้ดี

คุณสามารถสร้างตาราง 1x2 และวางไว้divsข้างในแล้วจัดรูปแบบตารางด้วย CSS เพื่อวางตามที่คุณต้องการ:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

บันทึก

หากคุณต้องการที่จะหลีกเลี่ยงการใช้ตารางเช่นกล่าวว่าก่อนที่คุณสามารถใช้float: left;และfloat: right;และองค์ประกอบต่อไปนี้ไม่ลืมที่จะเพิ่มclear: left;, clear: right;หรือclear: both;เพื่อให้ได้ตำแหน่งที่ทำความสะอาด

div1 {
    float: right;
} 
div2 {
    float: left;
}

สิ่งนี้จะทำงานได้ตราบใดที่คุณตั้งค่าclear: bothสำหรับองค์ประกอบที่แยกบล็อกคอลัมน์ทั้งสองนี้

ฉันพบปัญหาเดียวกันและรุ่น Mohits ใช้งานได้ หากคุณต้องการรักษาลำดับซ้ายขวาของคุณใน html เพียงลองนี้ ในกรณีของฉัน div ซ้ายกำลังปรับขนาด div ขวาจะอยู่ที่ความกว้าง 260px

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

เคล็ดลับคือการใช้ช่องว่างภายในที่ถูกต้องบนกล่องหลัก แต่ใช้พื้นที่นั้นอีกครั้งโดยการวางกล่องด้านขวาอีกครั้งด้วยระยะขอบขวา

ฉันใช้ส่วนผสมของโฟลตและโอเวอร์โฟลว์ -x: ซ่อนเร้น รหัสขั้นต่ำใช้งานได้เสมอ

https://jsfiddle.net/9934sc4d/4/ - บวกคุณไม่จำเป็นต้องล้างทุ่นของคุณ!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

ตามที่ทุกคนได้ชี้ให้เห็นคุณจะทำสิ่งนี้โดยตั้งค่าfloat:right;เนื้อหา RHS และระยะขอบติดลบบน LHS

อย่างไรก็ตาม .. ถ้าคุณไม่ใช้ a float: left;บน LHS (อย่างที่ Mohit ทำ) คุณจะได้รับเอฟเฟกต์ที่ก้าวกระโดดเพราะ LHS div ยังคงใช้พื้นที่ส่วนขอบในการจัดวาง

อย่างไรก็ตาม .. LHS float จะหดห่อเนื้อหาดังนั้นคุณจะต้องแทรก childnode ความกว้างที่กำหนดไว้หากไม่ยอมรับซึ่งในจุดนี้คุณอาจกำหนดความกว้างของพาเรนต์

อย่างไรก็ตาม .. เมื่อเดวิดชี้ให้เห็นคุณสามารถเปลี่ยนลำดับการอ่านของมาร์กอัปเพื่อหลีกเลี่ยงข้อกำหนดลอยตัว LHS แต่นั่นก็มีปัญหาเรื่องความสามารถในการอ่านและการเข้าถึงได้ง่าย

อย่างไรก็ตาม .. ปัญหานี้สามารถแก้ไขได้ด้วยการลอยตัวเนื่องจากมีมาร์กอัพเพิ่มเติม

(ข้อแม้: ฉันไม่เห็นด้วยกับการ. div div ในตัวอย่างนั้นดูรายละเอียดที่นี่ )

ทุกสิ่งพิจารณาแล้วฉันคิดว่าพวกเราส่วนใหญ่ต้องการมีความกว้างแบบไม่โลภเหลืออยู่ใน CSS3 ...

นี่ไม่ใช่คำตอบสำหรับทุกคนเนื่องจากไม่รองรับใน IE7- แต่คุณสามารถใช้แล้วใช้คำตอบอื่นสำหรับ IE7- มันคือ display: table, display: table-row และ display: table-cell โปรดทราบว่านี่ไม่ได้ใช้ตารางสำหรับการจัดวาง แต่จัดแต่ง divs เพื่อให้ทุกอย่างเข้ากันได้ดีโดยไม่ต้องยุ่งยากจากด้านบน Mine เป็นแอป html5 ดังนั้นจึงใช้งานได้ดี

บทความนี้แสดงตัวอย่าง: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

สไตล์ชีทของคุณจะมีลักษณะดังนี้:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

ในการถอดความเว็บไซต์ใดเว็บไซต์หนึ่งของฉันที่ทำสิ่งที่คล้ายกัน:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

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