วิธีห่อรายการดิ้นด้วยความกว้างคงที่

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

อย่างไรก็ตาม สิ่งที่ฉันได้รับคือ รายการดิ้นจะเรียงซ้อนกันทางด้านซ้าย:

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

ข้อมูลโค้ดที่นี่:

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.thing {
  padding: 10px;
  margin: 10px;
  width: 300px;
}
<div class="things">
  <div class="thing">
    {% for thing in things %}  <!-- It's a Django project -->
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
    {% endfor %}
  </div>
</div>

มันเกี่ยวข้องกับการใส่สไตล์ในเทมเพลต Django หรือไม่?


html css flexbox django-templates
person yinkouya    schedule 12.12.2017    source แหล่งที่มา
comment
ตัวอย่างไม่แสดงปัญหา   -  person Paulie_D    schedule 12.12.2017
comment
จริงๆ แล้วไม่มีปัญหากับรหัสของคุณ ฉันลองใช้ซอ (jsfiddle.net/m0nk3y/f05xhv4b) และใช้งานได้ดี . คุณไม่จำเป็นต้องทำ flex-flow: row wrap; คุณก็ทำได้ flex-flow: wrap กำลังห่อเพราะความกว้างของคอนเทนเนอร์ไม่กว้างพอที่จะใส่หลายอันได้ .thing   -  person Gene Parcellano    schedule 12.12.2017
comment
ทำให้ .thing เป็นคอนเทนเนอร์ดิ้น ไม่ใช่ .things stackoverflow.com/q/37840646/3597276   -  person Michael Benjamin    schedule 12.12.2017

คำตอบ (2)


arrow_upward
0
arrow_downward

การเปลี่ยนแปลงที่คุณอาจต้องทำมีดังนี้:

  • ขั้นแรก เนื่องจากคุณใช้ for-loop เพื่อสร้างแต่ละรายการที่มีชื่อ คำอธิบาย ฯลฯ คุณจึงจำเป็นต้องใช้โค้ด Django ของคุณสำหรับจุดเริ่มต้นและจุดสิ้นสุดของลูปภายนอก <div class="thing"> ดังนี้:

    {% for thing in things %}
    <div class="thing">
    <!-- It's a Django project -->
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>   
</div> {% endfor %}

  • เพิ่มคุณสมบัติของ justify-content: space-around; ในคอนเทนเนอร์ .things เพื่อกระจายพื้นที่ให้เท่าๆ กัน

  • แทนที่จะตั้งค่าความกว้างสำหรับคอนเทนเนอร์ .thing ให้ใช้ flex:0 1 25%; โดยที่ 25% จะเป็นความกว้างของคอนเทนเนอร์ .thing คุณยังสามารถตั้งค่าให้เป็นค่าสัมบูรณ์ในหน่วย px ได้ด้วย และมันจะตัดคำเมื่อปรับไม่ได้อีกต่อไปในแถวเดียวกัน . หากคุณเปลี่ยน '0' เป็น '1' คุณสามารถขยายให้มีขนาดไม่เท่ากันได้

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-flow:row wrap;
  display: flex;
  justify-content: space-around;
}

.thing {
  border:1px solid black;
  padding: 10px;
  margin:5px;
  flex:0 1 25%;
  background:red;
}
<div class="things">
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  
</div>

person Community    schedule 12.12.2017
comment
คุณพูดถูก ปัญหาคือฉันควรใส่ for loop ไว้นอก div ทั้งหมด . นอกจากนี้ ฉันยังลองใช้ ‹flex:1 1 25%› มันได้ผลดีโดยไม่ต้อง ‹justify-content: space-around› ขอบคุณ - person yinkouya; 13.12.2017
comment
@yinkouya ไม่มีปัญหา :) - person ; 13.12.2017

arrow_upward
0
arrow_downward

คุณต้องใช้ justify-content:space-around เพื่อสร้างช่องว่างรอบๆ รายการสำหรับรายการหลัก .things และ flex-basis:25% เพื่อตั้งค่าความยาวเริ่มต้นให้กับรายการย่อย .thing

.things {
  font: 13px Verdana;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
}

.thing {
  flex-basis: 25%;
  padding: 10px;
  background: cadetblue;
  text-align: center;
  box-sizing: border-box;
  border: 2px solid #fff;
}
<div class="things">
  <div class="thing">
    <h2>Title 1</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 2</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 3</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 4</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 5</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 6</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
</div>

person Bhuwan    schedule 12.12.2017
comment
ฉันลองทำตามคำแนะนำของคุณก่อนที่จะโพสต์สิ่งนี้ ปัญหาคือฉันใส่ for loop ผิด ขอบคุณนะ - person yinkouya; 13.12.2017