CSS中圖片從左往右排列是常見的布局方式。可以使用以下方法實現:
.container { display: flex; } .container img { margin-right: 10px; }
首先,創建一個
元素作為容器,給它設置display: flex;。這將使容器中的元素變成一個彈性盒子,可以按照指定的方向排列。默認情況下,彈性盒子是在水平方向上排列的。
然后,在所有元素上設置右側外邊距,以使它們相互分離。在這個例子中,外邊距設置為10像素。
如果你需要在垂直方向上排列圖片,可以將容器的flex-direction屬性設置為column。
.container { display: flex; flex-direction: column; } .container img { margin-bottom: 10px; }
這里的外邊距是設置在下方而不是右方,使得圖片在垂直方向上分離。