當我們在設計網頁時，通常會將一張圖片和一段文字放在同一個容器內。這時候，我們希望兩者各占容器的一半空間。那么要如何實現呢？

.container {
display: flex; /*使用flex布局*/
align-items: center; /*垂直居中*/
justify-content: space-between; /*平分空間*/
width: 100%; /*設置寬度*/
height: 300px; /*設置高度*/
}
.container img {
width: 50%; /*圖片寬度占容器50%*/
height: auto; /*圖片高度自適應*/
}
.container p {
width: 50%; /*文字寬度占容器50%*/
text-align: justify; /*文字兩端對齊*/
}

以上是一個簡單的實現方式，主要是通過Flex布局實現。通過設置container為display:flex，可以讓容器內部的元素按照一定規則進行布局。同時，還需要設置img和p的寬度，讓它們各占一半的空間。

最后，建議在使用CSS布局時，不僅要注意圖文布局，還要注意網頁的響應式布局，讓網頁在不同設備上都能夠正常顯示。