วิธีจัดแนวข้อความด้วยภาพแนวทแยง

ลูกค้า OSTraining รายหนึ่งขอวิธีจัดแนวข้อความถัดจากรูปภาพในแนวทแยง โดยรักษาช่องว่างระหว่างองค์ประกอบทั้งสอง

ความคิดแรกของฉันคือการเพิ่มเบรกไลน์ที่จุดเฉพาะของข้อความ แต่ไม่ได้ผลเนื่องจากไซต์ตอบสนอง

หลังจากที่ได้พูดคุยกับลูกค้า เราก็ได้วิธีแก้ปัญหาที่หรูหรามากขึ้น ...

กรณีการใช้งาน

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

การแก้ไขปัญหา

เราสามารถเพิ่ม div ว่างๆ ที่ลอยอยู่ทางด้านขวาด้วยค่าความกว้างแบบไดนามิกเพื่อบังคับให้ข้อความไม่ซ้อนทับรูปภาพ หมายเหตุ ในตัวอย่างนี้ รูปภาพจะถูกเพิ่มเป็นพื้นหลังด้วย CSS

HTML

HTML สำหรับตัวอย่างนี้มีลักษณะดังนี้:

 <div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <p>A buch of dummy text goes here...</p> </div>

คุณสามารถสังเกตเห็น div ที่ว่างเปล่าหลายรายการที่มีคลาสการ เว้นวรรค องค์ประกอบเหล่านั้นเมื่อรวมกับ CSS บางส่วนจะสร้างระยะห่างระหว่างข้อความและรูปภาพ

จำนวนช่องว่าง div เท่ากับจำนวนบรรทัดข้อความที่จำเป็นในการเติมความสูงของภาพ ในตัวอย่างนี้ รูปภาพต้องมี 14 บรรทัด

CSS

ฉันจะแบ่ง CSS ที่จำเป็นออกเป็นหลายส่วนเพื่อให้คำอธิบายดีขึ้น

 #container {  background-image: url(bg.png);  background-repeat: no-repeat;  background-position: right top;  background-size: 300px auto;  min-height: 300px; }

กำหนดรูปภาพเป็นพื้นหลังโดยมีตำแหน่งและขนาดเฉพาะ

 #container p {  line-height: 22px;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 14px; }

#container p selector อ้างอิงถึงข้อความ สิ่งสำคัญคือต้องกำหนดขนาดแบบอักษรและความสูงของบรรทัดเพื่อคำนวณค่าของคุณสมบัติอื่นๆ ในภายหลัง

 .spacing {  float: right;  clear: right;  height: 22px; }

คุณสมบัตินี้บอกให้ div ที่ว่างเปล่าลอยอยู่ทางด้านขวา หมายเหตุ ค่า ความสูง เหมือนกับที่เราใช้สำหรับ ความสูงของบรรทัด ในย่อหน้า

 .spacing:nth-child(1) {  width: 305px; } .spacing:nth-child(2) {  width: 283px; } .spacing:nth-child(3) {  width: 261px; } .spacing:nth-child(4) {  width: 239px; } .spacing:nth-child(5) {  width: 217px; } .spacing:nth-child(6) {  width: 195px; } .spacing:nth-child(7) {  width: 173px; } .spacing:nth-child(8) {  width: 151px; } .spacing:nth-child(9) {  width: 129px; } .spacing:nth-child(10) {  width: 107px; } .spacing:nth-child(11) {  width: 85px; } .spacing:nth-child(12) {  width: 63px; } .spacing:nth-child(13) {  width: 41px; } .spacing:nth-child(14) {  width: 19px; }

โค้ดด้านบนเป็นส่วนที่สนุกที่อาจต้องใช้เครื่องคิดเลข

ค่า ความกว้าง ที่เลือกสำหรับ .spacing:nth-child(1) จะใช้กับ div แรกที่มีคลาสการเว้นวรรค เช่นเดียวกับ .spacing:nth-child(2) กำหนดความกว้างที่เล็กกว่าเล็กน้อย และอื่นๆ จนกว่าจะถึงองค์ประกอบการ เว้นวรรค หมายเลข 14

เหตุผลในการกำหนดค่าไดนามิกจากสูงไปต่ำไปยังแต่ละ div ที่ว่างเปล่าทางด้านขวา ทำให้สามารถจัดข้อความชิดซ้ายโดยไม่วางซ้อนภาพ

อย่างที่กล่าวไปแล้ว เราจะคำนวณความกว้างของ div ที่ว่างเปล่าแต่ละอันได้อย่างไร คำตอบต้องใช้สูตรขนาดเล็กตามค่าของ:

• ความสูงของบรรทัด สำหรับข้อความ (22px ในตัวอย่างของฉัน)
• ขนาดพื้นหลัง (300px ในตัวอย่างนี้)

ความกว้างสำหรับ div ว่างแรกคือ 305px ซึ่งเป็นค่าของความกว้างของพื้นหลังที่กำหนดบวก 5 พิกเซลพิเศษที่ฉันตัดสินใจรวมไว้เพื่อหลีกเลี่ยงไม่ให้ข้อความอยู่ใกล้ขอบของรูปภาพมากเกินไป

การสนับสนุนที่ตอบสนอง

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

ดูตัวอย่าง

โบนัส: LESS

ทางเลือกหนึ่งในการไปยัง CSS โดยตรงคือน้อยกว่า เรามีบทช่วยสอนหากคุณยังใหม่กับ LESS

คุณสามารถสร้างผลลัพธ์เดียวกันได้โดยใช้ LESS เพื่อสร้างค่าความกว้างหลายค่าแบบไดนามิกสำหรับแต่ละ div ที่มีคลาสการ เว้นวรรค อย่างง่ายดายโดยไม่ต้องกังวลเกี่ยวกับคณิตศาสตร์

 @textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;

กำหนดความสูงของข้อความและความกว้างพื้นหลังผ่านตัวแปร

 #container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: right top;    background-size: @backgroundWidth auto;    min-height: @backgroundWidth; }

คุณสมบัติของคอนเทนเนอร์

 #container p {    line-height: @textHeight;    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;    font-size: @textHeight - 8; } .spacing {    float: right;    clear: right;    height: @textHeight; }

คุณสมบัติข้อความและการเว้นวรรคที่คำนวณแบบไดนามิกตามตัวแปรบางตัว

 .generate-spacing(@i, @end) when (@i <= @end) {    .spacing:nth-child(@{i}) {        width: @initialWidth - ((@i - 1) * @textHeight);    }    .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);

ลูปที่สร้างความกว้างแบบไดนามิกสำหรับ div ที่ว่างเปล่าทั้งหมด

ทดสอบรหัสนี้ใน Codepen