จะแบ่งหน้าบล็อก WordPress ออกเป็นเค้าโครงตอบสนอง 2 คอลัมน์ได้อย่างไร

ฉันอยากรู้ว่าคุณจะสร้างเลย์เอาต์ 2 คอลัมน์สำหรับโพสต์ใน WordPress Loop ได้อย่างไร

1 | 2

3 | 4

5 | 6

ด้านบนเป็นตัวอย่างว่าหน้าบล็อกควรมีลักษณะอย่างไร อย่างไรก็ตาม โพสต์ทั้งหมดไม่ได้มีความสูงเท่ากัน (ซึ่งหมายความว่าฉันไม่สามารถใช้กฎโฟลต CSS ได้ - เนื่องจากโพสต์ไม่ดันขึ้น - เช่น

1 | 2

. | 2

3 | 4

ฉันยังไม่กระตือรือร้นที่จะใช้ปลั๊กอินก่ออิฐที่มีการบันทึกไว้อย่างดี เนื่องจากฉันแน่ใจว่าจะต้องมีวิธีที่ 'เบากว่า' ในการดำเนินการนี้

ยิ่งไปกว่านั้น ฉันต้องการให้คอลัมน์เหล่านี้ตอบสนองต่อความกว้างของหน้าจอเบราว์เซอร์

ซึ่งในกรณีนี้ก็ควรตกอยู่ในรูปแบบของ

1

2

3

4

ฯลฯ

ข้อเสนอแนะใด ๆ จะดีมาก - ขอบคุณล่วงหน้า

อัปเดต

ฉันได้ลองวางโพสต์เป็นคู่แล้ว - สิ่งนี้ตอบสนองได้ดีกับการปรับขนาดเบราว์เซอร์ อย่างไรก็ตาม ฉันได้แสดงปัญหาไว้ด้านล่างแล้ว

ที่นี่โพสต์สามารถนั่งเท่าๆ กันใน 2 คอลัมน์ - อย่างไรก็ตาม ด้วยโพสต์ที่มีความสูงต่างกัน - จะเกิดสิ่งต่อไปนี้:

ป้อนคำอธิบายรูปภาพที่นี่

นี่คือสิ่งที่ฉันต้องการให้เกิดขึ้น - เพื่อให้โพสต์ซ้อนกัน:

ป้อนคำอธิบายรูปภาพที่นี่


wordpress html css responsive-design posts
person user2075625    schedule 19.02.2014    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

ดังนั้นสิ่งที่คุณต้องรู้คือโมดูโล่ http://en.wikipedia.org/wiki/Modulo_operation ในรูปแบบที่ง่ายที่สุดคือวิธีที่ยอดเยี่ยม เพื่อสลับแถว ฯลฯ แต่ใช้ในภาษาการเขียนโปรแกรมเกือบทั้งหมด นี่คือตัวอย่างวิธีที่คุณจะทำสิ่งที่คุณต้องการจะทำ...

$posts = array(1,2,3,4,5,6);

echo "<div class ='new_row'>";
for($i=0;$i<count($posts);$i++)
{
  if(($i % 2)==0){
   //create new post container
   echo "<div class = 'post'>"+$post[$i]+"</div>";
   //close row holding two posts
   echo "</div>"
   //start new row for next 2 posts
   echo "<div class ='new_row'>";
  }else{
      //create new post container
      echo "<div class = 'post'>"+$post[$i]+"</div>";
  }
}
echo "</div>";

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

person G.Thompson    schedule 20.02.2014
comment
ขอบคุณสำหรับคำตอบและคำแนะนำของคุณ! อย่างไรก็ตาม น่าเสียดายที่ฉันได้ลองใช้วิธีนี้แล้ว - และถึงแม้ว่ามันจะแบ่งเป็น 2 คอลัมน์ แต่โพสต์ก็มีความสูงไม่เท่ากันและไม่เรียงซ้อนกันอย่างเรียบร้อย (โปรดดูการอัปเดตของคำถามเดิมของฉัน) - ขอบคุณ! - person user2075625; 20.02.2014
comment
อ่า เข้าใจแล้ว การไม่ใช้เฟรมเวิร์กเช่นการก่ออิฐ นี่อาจค่อนข้างยุ่งยาก โดยเฉพาะอย่างยิ่งการทำให้ตอบสนอง - person G.Thompson; 20.02.2014