左圖右文是一直以來網頁設計不可缺少的排版方式,對於很有經驗的人來說,這並不是什麼大挑戰
但對新手來說就不一定了,一般想到左圖右文的排版方式可能就是用float屬性或是display:inline-block;
在設定 width:calc(100%/2);就可以實現兩欄排版,但是問題來了,在css排版上水平置中是很容易的,
假設html code是
<div class="box">
<div class="left"><img alt="" src=""></div>
<div class="right">文字</div>
</div>
圖片只要設定
img{
display:block;
margin:auto;
}
文字只需要text-align:center;就可達到
你要怎麼達到垂直置中?
有一種方式就是
Css排版屬性 display: inline-block;加上 vertical-align: middle; 屬性即可讓圖文垂直置中
.left , .right {
display: inline-block;
vertical-align: middle;
width: calc(100% - 4px);
}
這樣的方式左圖右文就可以讓垂直達到置中
另外再提一點,如果今天客戶要求一共兩列的兩欄式左圖右文,像是
<div class="box box-1">
<div class="left"><img alt="" src=""></div>
<div class="right">文字</div>
</div>
<div class="box box-2">
<div class="left"><img alt="" src=""></div>
<div class="right">文字</div>
</div>
而且第一列是左圖右文,第二列是左文右圖,一般新手一定會對html去做排版更變,像是
<div class="box box-1">
<div class="left"><img alt="" src=""></div>
<div class="right">文字</div>
</div>
<div class="box box-2">
<div class="left">文字</div>
<div class="right"><img alt="" src=""></div>
</div>
這樣的作法不是說不行,只是在這RWD時代對於手機板的排列那體驗可就不好了,左圖右文在手機版上會呈現上圖下文
有兩列的情況下用這種排版就會變成,一列為上圖下文一列為上文下圖,無法達到一置性
解法為下:不更動html碼
<div class="box box-1">
<div class="left"><img alt="" src=""></div>
<div class="right">文字</div>
</div>
<div class="box box-2">
<div class="left"><img alt="" src=""></div>
<div class="right">文字</div>
</div>
在最上層的box設定以下屬性
.box {
display: flex;
align-items: center;
margin: auto;
width: 1200px;
}
//內容的左右可自訂大小
.left , .right {
width: 50%;
}
或是
.left {
width: 60%;
}
.right {
width: 40%;
}
最重要的屬性在這一段 如果你要讓box-2的排版左右對調,只要加入此屬性即可解決
.box-2 {
flex-direction: row-reverse;
}
之後在rwd響應的指定尺寸再將flex-direction屬性 none掉就好,例如:
@media screen and (max-width: 768px) {
flex-direction:none;
}
以上是一個相當好用的方法分享給各位!若覺得不錯在請多分享唷^^!
文章標籤
全站熱搜
留言列表
