我如何做兩個分區，但在兩者之間在 css 中繪制一條垂直線

Question

我正在嘗試制作兩個分區，一部分包含圖像，另一部分包含文本。 我已經提供了像我想如何制作的圖像，但很抱歉我無法在此處提供圖像，因為聲望不到 10 我需要至少 10 聲望才能在此處發布圖像，因此請轉到提供的圖像鏈接評論框。我也提供了我嘗試過的代碼。 所以請任何人都可以通過提供任何示例來提供幫助。 我正在嘗試按照我已經在評論框中提供的布局進行布局，請從評論框中檢查，我真的是級聯樣式表的新手，所以請幫助我。 提前致謝。

到目前為止，我的 HTML：

<div class = "layer5 main">
    <h1>Features</h1>
    <DIV style="width: 50%; border-right: solid 2px lightgreen">
    </DIV>
</div>

這是我想要做的。

這是我到目前為止所擁有的。

Answer 1

添加一些容器，然后在其中添加 2 個元素（塊或表格單元格）。 風格吧。 就這樣。

垂直對齊有一個簡單的解決方案。

 .layer5 { text-align: center; margin-top: 20px; } .container { position: relative; display: table; width: 400px; border: 0px solid #000; } .image, .text { display: table-cell; vertical-align: middle; text-align: center; border: 0px solid tomato; padding: 10px; } .image { width: 200px; } .text { border-left: 2px solid red; width: 198px; } img { width: 100%; height: 100%; }

 <div class="layer5 main"> <h1>Features</h1> <div class="container"> <div class="image"><img src="https://www.enterprise.com/content/dam/global-vehicle-images/cars/FORD_FOCU_2012-1.png" alt=""></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptas accusamus quidem officia. Provident consectetur ab nulla placeat fuga iusto, cumque voluptatem magnam veniam minus incidunt unde quae error labore?</div> </div> </div>

Answer 2

嘗試這個 ：

 .layer5 { text-align: center; margin-top: 20px; } .firstSection{float:left;width:45%;} .secondSection{float:left;width:45%;} .seprator{width: 5%; border-right: solid 2px lightgreen;height:25px;float:left;}

 <div class = "layer5 main"> <div class='firstSection'>Features1</div> <div class='seprator'></div> <div class='secondSection'>Features2</div> <div style='clear:both;'></div> </div>

Answer 3

看看這段代碼：

 .layer5 { text-align: center; margin-top: 20px; } .container { width: 300px; margin-left: auto; margin-right: auto; height: 120px; display: block; } #imgdiv img { width: 100px; float: left; } #textdiv p { border-left: 2px solid green; float: right; padding-left: 50px; } #textdiv2 p { float: left; border-right: 2px solid green; padding-right: 50px; border-left: none } #imgdiv2 img { float: right; width: 100px; }

 <div class="layer5 main"> <h1>Features</h1> <div class="container"> <div id="imgdiv"> <img src="http://www.dl.21tech.ir/img-upload/2017/3/95121201.jpg" /> </div> <div id="textdiv"> <p>This is the text part.</p> </div> </div> <div class="container"> <div id="imgdiv2"> <img src="http://www.dl.21tech.ir/img-upload/2017/3/95121201.jpg" /> </div> <div id="textdiv2"> <p>This is the text part.</p> </div> </div> </div>