ฉันจะจัดระยะห่างหรือ div ในแนวนอนได้อย่างไร

ปัญหาเดียวของฉันคือทำให้พวกมันเรียงกันเป็นสามเส้นและมีระยะห่างเท่ากัน เห็นได้ชัดว่า Spans ต้องไม่มี width และ div (และ spans with display: block) จะไม่ปรากฏในแนวนอนติดกัน ข้อเสนอแนะ?

<div style='width:30%; text-align:center; float:left; clear:both;'> คือสิ่งที่ฉันมีอยู่ตอนนี้

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

คุณสามารถใช้ได้

.floatybox {
     display: inline-block;
     width: 123px;
}

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

โอ้และคุณอาจต้องการเพิ่มแนวตั้ง: ด้านบนขององค์ประกอบเพื่อให้แน่ใจว่าสิ่งต่างๆเรียงตัวกัน

คำตอบของฉัน:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

ทำไม?

ในทางเทคนิค Span เป็นองค์ประกอบแบบอินไลน์ แต่สามารถมีความกว้างได้คุณเพียงแค่ต้องตั้งค่าคุณสมบัติการแสดงผลเพื่อบล็อกก่อน อย่างไรก็ตามในบริบทนี้ div น่าจะเหมาะสมกว่าเนื่องจากฉันเดาว่าคุณต้องการเติมเนื้อหา div เหล่านี้

สิ่งหนึ่งที่คุณไม่ต้องการทำแน่นอนคือการclear:bothตั้งค่า div การตั้งค่าแบบนั้นจะหมายความว่าเบราว์เซอร์จะไม่อนุญาตให้องค์ประกอบใด ๆ นั่งอยู่ในบรรทัดเดียวกับพวกเขา ผลลัพธ์องค์ประกอบของคุณจะซ้อนกัน

หมายเหตุการใช้display:inline. สิ่งนี้เกี่ยวข้องกับข้อผิดพลาดที่เพิ่มขึ้นเป็นสองเท่าของ ie6 คุณสามารถจัดการสิ่งนี้ด้วยวิธีอื่นได้หากจำเป็นตัวอย่างเช่นสไตล์ชีตแบบมีเงื่อนไข

ฉันได้เพิ่ม wrapper (# อะไรก็ได้) เนื่องจากฉันเดาว่าสิ่งเหล่านี้จะไม่ใช่องค์ประกอบเดียวในหน้าดังนั้นคุณแทบจะต้องแยกพวกมันออกจากองค์ประกอบของหน้าอื่น ๆ

อย่างไรก็ตามฉันหวังว่าจะเป็นประโยชน์

คุณทำได้:

<div style="float: left;"></div>

หรือ

<div style="display: inline;"></div>

อย่างใดอย่างหนึ่งจะทำให้ divs เรียงต่อกันในแนวนอน

ฉันจะทำแบบนี้เพราะให้คอลัมน์ขนาดเท่ากัน 3 คอลัมน์แม้กระทั่งระยะห่างและสเกล (คู่) หมายเหตุ:ยังไม่ได้ทดสอบดังนั้นจึงอาจต้องปรับแต่งเบราว์เซอร์รุ่นเก่า

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

ฉันจะใช้:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

นี่เป็นครั้งแรกที่ฉันใช้ 'code tool' จาก overflow ... แต่ตอนนี้ shoul ทำไปแล้ว ...

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

ลองใช้สิ่งนี้เพื่อเริ่มต้นจาก Smashing Magazine

ดูคุณสมบัติ css Float http://w3schools.com/css/pr_class_float.asp

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

ฉันจะพยายามที่จะให้พวกเขาทั้งหมดแอตทริบิวต์และการใช้display: block;float: left;

จากนั้นคุณสามารถตั้งค่าwidthและ / หรือheightตามที่คุณต้องการ คุณสามารถระบุกฎการจัดตำแหน่งแนวตั้งได้ด้วย

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

อื่น ... ลองใช้float: left;หรือright;เปลี่ยนwidthค่าอื่น ๆ ... มันทำงาน ... โปรดทราบว่า 10% ที่ไม่ได้ใช้โดย div จะทำให้พวกเขา ...