CSS Line Dividor

Question

我試圖以特定的方式組織兩組信息。我有一個很粗糙的模仿，在這裏：

https://imgur.com/a/LrSCg

我所擁有的一切，除了兩組信息之間的潛水線工作。我已經嘗試將整個東西設置爲一個表格，然後設置適當的邊框樣式，但是這樣做效果不佳。

這是我目前有打動了我一切，除了中間的分界線：

<table style="margin: 0 auto; border: 1px solid black; table-layout: fixed"> 
    <tr> 
     <td> 
      <img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b"> 
     </td> 
     <td style="display:block;"> 
      <div style="float: left; margin: 20px 0 0 20px;"> 
       <table> 
        <tr> 
         <td style="width: 75px;">Name:</td><td><span id="left_name" style="font-weight: bold"></span></td> 
        </tr> 
        <tr> 
         <td style="width: 75px;">Category:</td> 
         <td><span id="left_category" style="font-weight: bold"></span></td> 
        </tr> 
        <tr> 
         <td style="width: 75px;">ID:</td> 
         <td><span id="left_id" style="font-weight: bold;"></span></td> 
        </tr> 
       </table> 
      </div> 

      <hr> 

      <div style="float: right; margin: 100px 20px 0 0;"> 
       <table> 
        <tr> 
         <td style="width: 75px;">Name:</td> 
         <td><span id="right_name" style="font-weight: bold"></span></td> 
        </tr> 
        <tr> 
         <td style="width: 75px;">Category:</td> 
         <td><span id="right_category" style="font-weight: bold"></span></td> 
        </tr> 
        <tr> 
         <td style="width: 75px;">ID:</td> 
         <td><span id="right_id" style="font-weight: bold"></span></td> 
        </tr> 
       </table> 
      </div> 

     </td> 
     <td> 
      <img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b"> 
     </td> 
    </tr> 
    <tr> 
     <td style="text-align: center;"> 
      <button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button> 
     </td> 
     <td></td> 
     <td style="text-align: center;"> 
      <button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button> 
     </td> 
    </tr> 
</table> 

這只是實驗性的代碼，它沒有被清理還，所以請忽略所有的在線造型。

這裏是一個草率的例子我扔在一起：https://jsfiddle.net/33pc23w0/2/

我想提出在該行代碼，而不是使用任何圖像，因爲我想的元素在尺寸靈活。中間線上的任何建議？

Answer 1

這是一個快速解決方案。我將主容器設置爲relative位置，並添加了兩個absolute位置divs，並帶有適當的邊框和尺寸以處理分隔線。

.main-container { 
 
    width: 800px; 
 
    position: relative; 
 
} 
 

 
.divider-top { 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    left: 300px; 
 
    border: 2px solid black; 
 
    border-left: 0px; 
 
    border-top: 0px; 
 
} 
 

 
.divider-bottom { 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 167px; 
 
    top: 150px; 
 
    left: 300px; 
 
    border: 0px; 
 
    border-left: 2px solid black; 
 
} 
 

 
.details_images { 
 
    display: block; 
 
    margin: auto; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    border-radius: 10px; 
 
} 
 

 
.btn4 { 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    width: 150px; 
 
    height: 50px; 
 
} 
 

 
.btn4.focus, 
 
.btn4:focus, 
 
.btn4:hover { 
 
    color: #333; 
 
    text-decoration: none; 
 
} 
 

 
.btn4-confirm { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #4cae4c; 
 
} 
 

 
.btn4-confirm:active { 
 
    color: #fff; 
 
    background-color: #449d44; 
 
    border-color: #398439; 
 
}

<div class="main-container"> 
 

 
    <div class="divider-top"></div> 
 
    <div class="divider-bottom"></div> 
 

 
    <table style="width: 100%; border: 1px solid black; table-layout: fixed"> 
 
    <tr> 
 
     <td> 
 
     <img id="left_image" class="images" alt="left_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b"> 
 
     </td> 
 
     <td style="display:block;"> 
 
     <div style="float: left; margin: 20px 0 0 20px;"> 
 
      <table> 
 
      <tr> 
 
       <td style="width: 75px;">Name:</td> 
 
       <td><span id="left_name" style="font-weight: bold">Blah</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="width: 75px;">Category:</td> 
 
       <td><span id="left_category" style="font-weight: bold">Blah</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="width: 75px;">ID:</td> 
 
       <td><span id="left_id" style="font-weight: bold;">Blah</span></td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 

 
     <div style="float: right; margin: 100px 20px 0 0;"> 
 
      <table> 
 
      <tr> 
 
       <td style="width: 75px;">Name:</td> 
 
       <td><span id="right_name" style="font-weight: bold">Blah</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="width: 75px;">Category:</td> 
 
       <td><span id="right_category" style="font-weight: bold">Blah</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="width: 75px;">ID:</td> 
 
       <td><span id="right_id" style="font-weight: bold">Blah</span></td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 

 
     </td> 
 
     <td> 
 
     <img id="right_image" class="images" alt="right_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="text-align: center;"> 
 
     <button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button> 
 
     </td> 
 
     <td></td> 
 
     <td style="text-align: center;"> 
 
     <button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>