響應HTML - 垂直線跨圖像

Question

請幫我創建一個像下面的圖像一樣的html部分。我用div表創建了基​​本結構。但我無法實現橫跨中心圖像的垂直線。因爲這是響應頁面，我無法給出固定值。請引導我對此

Answer 1

假設圖標是圖像，您應該知道px的大小，對？ 然後，將所有內容都包含在父元素，圖標和表格本身中，如此處所示。

.parent { 
 
    position: relative; 
 
} 
 
.parent table { 
 
    width: 100%; 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
} 
 
.icon { 
 
    display: block; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -32px; 
 
    margin-top: -32px; 
 
    width: 64px; 
 
    height: 64px; 
 
    background: #e5e5e5 
 
url(https://cdn4.iconfinder.com/data/icons/nature-and-ecology/128/Nature__Eco_water_reuse-64.png) no-repeat; 
 
    border-radius: 32px; 
 
} 
 
.left, 
 
.right { 
 
    border: 1px solid #252122; 
 
    text-align: center; 
 
    padding: 15px; 
 
    width: 50%; 
 
    vertical-align: middle; 
 
} 
 
table span { 
 
    display: block; 
 
} 
 
table td span:first-child { 
 
    font-size: 48px; 
 
}

<!-- Transparent icon by iconfinder.com, example only --> 
 
<div class="parent"> 
 
    <!--Positioned absolute, image transparent, css background set manually--> 
 
    <div class="icon"></div> 
 
    <table> 
 
    <td class="left"> 
 
     <span>FROM</span> 
 
     <span>Select Departure</span> 
 
    </td> 
 
    <td class="right"> 
 
     <span>TO</span> 
 
     <span>Select Arrival</span> 
 
    </td> 
 
    </table> 
 
</div>